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

html-css016

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()

你可以试试2个div都设一下背景，一个模糊的放底层，清晰的放上层，通过控制清晰的那个div的位置和背景位移来达到你要的效果，或者你网上搜一下模糊滤镜的js脚本来实现，当然，如果你那个清晰的圆形的位置是固定不变的，那么你还是把这个效果用ps做成一张图是最好的，这也是最方便的，做网页设计不要纠结于技巧，能用最简单的方式达到效果是最好的方式，如果是我，我肯定就是做2个图片来实现效果最简单快捷