HTML5中使用canvas绘制圆形
HTML5中使用canvas绘制圆形
博为峰教研组 发表于11个月前
HTML5中使用canvas绘制圆形
  • 发表于 11个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

下面我们就来看一下使用canvas如何绘制除矩形以为的其他图形,要想绘制其他图形,需要使用路径,同样在绘制之前,先要获取图形上下文,然后在执行以下步骤:

1开始.创建路径

使用图形上下文对象beginPath方法,使用如下:context.beginPath();

该方法没有参数,通过调用该方法开始创建路径

2.创建图形的路径

需要使用图形上下文对象方法arc,使用如下:

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

该方法有6个参数,x为绘制圆形起点的横坐标,y为绘制圆形起点的纵坐标,radius为圆形的半径,startAngle为开始的角度,endAngle为结束的角度,anticlockwise为是否按顺时针方向进行绘制,这是一个布尔类型的参数,值为true时,表示按顺时针绘制。

 

3.路径创建完成后,关闭路径

使用图形上下文的closePath方法,使用如下:

context.closePath();

 

4.设定绘制样式,调用绘制方法,绘制路径

设置图形上下文context的fillStyle属性值,可以设置圆形的颜色。然后再调用fill方法。

context.fill();因为路径已经决定了图形的大小,所以这里就不需要在该方法中使用参数来指定图形的大小了。

 

运行的效果为:

 

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 46
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: