WXML代码
开始动态绘制
WXSS代码
特别注意：底层的canvas最好使用
z-index:-99；放置于底层
page { width: 100% height: 100% background-color: #fff
}.circle-box { text-align: center margin-top: 10vw
}.circle { position: absolute left: 0 right: 0 margin: auto
}.draw_btn { width: 35vw position: absolute top: 33vw right: 0 left: 0 margin: auto border: 1px #000 solid border-radius: 5vw
}
JS代码
//获取应用实例var app = getApp()var intervalvar varNamevar ctx = wx.createCanvasContext('canvasArcCir')
Page({ data: {
}, drawCircle: function () {
clearInterval(varName) function drawArc(s, e) {
ctx.setFillStyle('white')
ctx.clearRect(0, 0, 200, 200)
ctx.draw() var x = 100, y = 100, radius = 96
ctx.setLineWidth(5)
ctx.setStrokeStyle('#d81e06')
ctx.setLineCap('round')
ctx.beginPath()
ctx.arc(x, y, radius, s, e, false)
ctx.stroke()
ctx.draw()
}var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0 var animation_interval = 1000, n = 60 var animation = function () { if (step
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条）