html5如何使用canvas画空心圆与实心圆

html5如何使用canvas画空心圆与实心圆,第1张

stroke()是描边,就是空心圆。fill()是填充,就是实心圆

//空心

var canvas = document.getElementById("myCanvas").getContext('2d')

canvas.beginPath()

canvas.arc(圆心x坐标,圆心y坐标,半径,0,2*Math.PI,true)

canvas.closePath()

canvas.strokeStyle='black'

canvas.stroke()

//实心

var canvas = document.getElementById("myCanvas").getContext('2d')

canvas.beginPath()

canvas.arc(圆心x坐标,圆心y坐标,半径,0,2*Math.PI,true)

canvas.closePath()

canvas.fillStyle='black'

canvas.fill()

Chart.js允许通过HTML5的canvas进行图表绘制。这里我们希望绘制一个环形图,点击图上各segment时可以显示自定义的圆形tooltip。Chart.js支持通过几个变量添加tooltip,它提供一个tooltipTemplate但是却不支持自定义tooltip的HTML!于是决定自行绘制tooltip手动添加上去。

新建一个html5的文档,建立一个canvas画布,设置长宽,这里需要特别注意,canvas标签可以在标签内设置width,height,也能通过css来设置,但是通过css来设置的标签,当绘制图形的时候会变形,所以我们建议直接在标签内设置。

canvas画布本身不能绘画,它必须通过javascript来实现它的绘画功能,getContext('2d'),是它里面的内部对象,它里面封装了绘画的方法,大家一看见2d

是不是很兴奋,但是canvas很纯洁,并没有3d功能,我们建立好了模版,可以进行下一步了。

html5 canvas画布绘制矩形和圆形

3绘制一个矩形,填充颜色,这里面有两个知识点,fillStyle fillRect(0,0,100,100),fillRect有四个参数,前两个代表,x,y,表示位置,后两个代表长宽。蓝色方框就是我们的显示效果

1绘制一个圆型,beginPath ()表示路径开始,arc(0,0,50,0,Math.PI*2,true)参数解释前两个代表xy,第三个代表半径,第四个代表结束角度,第五个代表圆周率,第五个代表顺逆,

2我们再做一个复杂的图形,做一个笑脸

3我们已经学习canvas基本的 *** 作了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7104389.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存