博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5中使用canvas绘制圆形
阅读量:6895 次
发布时间:2019-06-27

本文共 610 字,大约阅读时间需要 2 分钟。

hot3.png

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

1开始.创建路径

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

该方法没有参数,通过调用该方法开始。

2.创建图形的路径

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

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

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

 

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

使用图形上下文的,使用如下:

context.closePath();

 

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

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

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

 

运行的效果为:

006zipb5zy7a5eNLRJJff&690 

 

转载于:https://my.oschina.net/u/2971691/blog/873862

你可能感兴趣的文章
onclick事件没有反应的五种可能情况
查看>>
vue----webpack----对vuex的理解
查看>>
08----mockjs处理前端传来的路径,获取?后面的值
查看>>
蓝桥杯 算法训练 最短路 [ 最短路 bellman ]
查看>>
修改 IIS6.0 时间格式的问题。
查看>>
C# IS 和 AS 的用法和区别
查看>>
软件测试过程中的缺陷密度计算问题
查看>>
图论算法----最短路
查看>>
[备用] 百度地图兴趣点抓取
查看>>
《About Face 3:交互设计精髓》读书笔记(一)
查看>>
invalid derived query的解决办法
查看>>
打印沙漏
查看>>
c#接口
查看>>
"只能在执行Render()的过程中调用RegisterForEventValidation" 解决方案
查看>>
vue中页面跳转拦截器的实现方法
查看>>
MySql连接异常解决
查看>>
mongodb Limit操作
查看>>
百度地图api
查看>>
unbuntu14.04下的串口软件monicom的使用
查看>>
SQLite实践
查看>>