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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)