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

微信小程序canvas2d绘制圆环进度条组件,第1张

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>

<canvas id="canvas" width="400" height="400"></canvas>

<script>

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>


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

原文地址: http://outofmemory.cn/yw/12283626.html

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

发表评论

登录后才能评论

评论列表(0条)

保存