微信小程序canvas2d绘制圆环进度条组件_软件运维

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

Canvas2D接口（type="2d"）,支持同层渲染的一神核仿个圆环进度条氏尺。（wx.createCanvasContext已废弃）游纤

https://gitee.com/susuhhhhhh/components

https://gitee.com/susuhhhhhh/wxmini_demo

在vue中用用canvas的arc绘制圆形，但弯型是实际效果是椭圆，用小程序原生写的时候没问题，迁移到vue中这样子啦。

原来是需要在canvas标签缓闹辩里面设置width和height属性，只在css里面设置width和height样式扰缺会有问题。

这篇文章解释的比较好：https://segmentfault.com/a/1190000016031115

canvas提供的clearRect(x, y, width, height)方法知者山只能清理出特定位置的矩形区域，以下代码则能实现对圆形区域的清

理，主要是利用计算圆周率时的方法，将整个圆切成一个一个细小的正方形，然后再通过clearRect(x, y, width, height)

方法将一个一个细小的正方形区域清理。

<!DOCTYPE html>

<html>

<head>

<style>

canvas{ border:1px solid black}

body{ margin:0padding:0}

</style>

</head>

<body>

var canvas=document.getElementById('canvas')

var context=canvas.getContext('2d')

context.beginPath()

context.fillStyle="blue"嫌基

context.arc(200,200,100,0,360*Math.PI/180)

context.fill()

function clearArc(x,y,radius){//圆心(x,y)，半搭中径radius

var calcWidth=radius-stepClear

var calcHeight=Math.sqrt(radius*radius-calcWidth*calcWidth)

var posX=x-calcWidth

var posY=y-calcHeight

var widthX=2*calcWidth

var heightY=2*calcHeight

if(stepClear<=radius){

context.clearRect(posX,posY,widthX,heightY)

stepClear+=1

clearArc(x,y,radius)

}

var stepClear=1//别忘记这一步

clearArc(210,230,50)

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

微信小程序canvas2d绘制圆环进度条组件