首页  >  文章  >  web前端  >  HTML5在canvas中绘制复杂形状附效果截图_html5教程技巧

HTML5在canvas中绘制复杂形状附效果截图_html5教程技巧

WBOY
WBOY原创
2016-05-16 15:47:281669浏览
一、绘制复杂形状或路径

在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径。

beginPath() : 开始绘制一个新路径。
closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状。
fill() , stroke() : 填充形状或绘制空心形状。
moveTo() : 将当前点移动到点(x,y)。
lineTo() : 从当前点绘制一条直线到点(x,y)。
arc(x,y,r,sAngle,eAngle,counterclockwise) : 绘制一条指定半径的弧到点(x,y)。

二、用这些方法绘制复杂形状需遵循以下步骤

使用beginPath()方法开始绘制路径。
使用moveTo()、lineTo()、arc()、方法创建线段。
使用closePath()结束绘制并闭合形状(可选)。
使用stroke()或fill()绘制路径的外边框或填充形状。使用fill()会自动闭合所有未闭合路径。

三、弧arc()绘制说明
 
 
四、在canvas中绘制复杂形状

复制代码
代码如下:






HTML5





提示:你的浏览器不支持标签




五、绘制效果
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn