文档章节

HTML5之帆布(canvas)(四)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 15:07
字数 373
阅读 1
收藏 0

绘制矩形

· 指定正方形的边长

· 指定正方形的位置点¯x和ÿ

· 设置正方形的属性

· 绘制正方形

//画正方形

function drawSquare(canvas,context) {

    var w = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.fillStyle = "lightblue";

    context.fillRect(x,y,w,w);

}绘制线

· beginPath方法方法告诉画布开始一个新路径

· 的moveTo方法把画笔移到画布上的指定点

· 了lineTo方法描绘路径,从画笔的当前位置描绘到画布上的另一个点

· 调用closePath方法将路径的起始点连接到当前路径的最后一个点

//绘制线

function drawLine(canvas, context) {

    context.beginPath();

    context.moveTo(100, 150);

    context.lineTo(250, 75);

    context.lineTo(125, 30);

    context.closePath();

    context.lineWidth = 5;

    context.stroke();

    context.fillStyle = "red";

    context.fill();

}

绘制圆形

· 创建一个路径

· 填充弧方法参数

· 设置圆的属性

· 填充圆

先来分析弧方法

context.arc(x,y,radius,startAngle,endAngle.direction);

· 点¯x和Y:确定圆心在画布上的位置

· 半径:圆的半径

· 由startAngle:圆弧的起始角,确定路径的起点,可以为负值(表示按负方向度量),单位为弧度

· endAngle:圆弧的终止角,确定路径的终点,可以为负值(表示按负方向度量),单位为弧度

· 方向:真表示逆时针画弧,虚假表示顺时针画弧

//画圆形

function drawCircle(canvas,context) {

 

    var radius = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.beginPath();

    context.arc(x,y,radius,0,degreeToRadians(360),true);

    context.fillStyle = "red";

    context.fill();

}

 

//度数转弧度

function degreeToRadians(degree) {

    return (degree * Math.PI) / 180;

}

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
HTML5应用——欢乐老虎机

在上面一篇博文中,我介绍了HTML5应用的简易播放器,这篇博文中介绍一个比较复 杂的HTML5游戏-老虎机。 寒假在家玩老虎机输了些许钱,所以自己就萌生了写个老虎机的游戏。开始打算用Visual ...

晨曦之光
2012/02/17
0
3
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Sentry使用

Sentry使用 以django为例.实际上sentry本身文档已经有介绍了.这里只是再总结 1、全局异常捕获 此方法可以全局捕获任何的异常(甚至包括你自己raise的异常),在实际使用过程中不太推荐.但胜在快...

_Change_
17分钟前
1
0
linux系统包管理工具详解 yum rpm apt-get pip wget

在Linux系统下,根据系统版本的不同会有各种各样的包管理工具,下面就简单的梳理一下这几种安装命令. 1、yum Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora、RedHat、CentOS中的...

huoyoung
20分钟前
1
0
阿里巴巴Dubbo实现的源码分析

1. Dubbo概述 Dubbo是阿里巴巴开源出来的一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及作为SOA服务治理的方案。它的核心功能包括: #remoting:远程通讯基础,提...

别打我会飞
21分钟前
5
0
tomcat的maxThreads、acceptCount(最大线程数、最大排队数)

tomcat 6的Connector配置如下: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads......

为了美好的明天
24分钟前
2
0
阿里P9架构师谈:高并发网站的监控系统选型、比较、核心监控指标

在高并发分布式环境下,对于访问量大的业务、接口等,需要及时的监控网站的健康程度,防止网站出现访问缓慢,甚至在特殊情况出现应用服务器雪崩等场景,在高并发场景下网站无法正常访问的情况...

架构师springboot
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部