小程序利用画布动态画圆
2017-03-08 16:36 改吧 阅读(4332) 评论(0) 编辑 收藏 举报wxml代码
<view class='container'> <canvas style='width:300px;height:200px;' canvas-id='canvas'></canvas> </view>
js代码
Page({ data: { // 开始角度 startAngle: -(1 / 2 * Math.PI), // 结束角度 endAngle: 3 / 2 * Math.PI, // 偏移角度 xAngle: Math.PI / 180 }, onLoad: function() { var that = this; var cxt_arc = wx.createContext(); var endAngle = that.data.endAngle; var xAngle = that.data.xAngle; var templeAngle = that.data.startAngle; var rander = function() { if (templeAngle >= endAngle) { return; } else if (templeAngle + xAngle > endAngle) { templeAngle = endAngle; } else { templeAngle += xAngle } cxt_arc.beginPath(); cxt_arc.setStrokeStyle('red') cxt_arc.arc(100, 50, 50, that.data.startAngle, templeAngle); cxt_arc.stroke(); cxt_arc.closePath(); wx.drawCanvas({ canvasId: 'canvas', actions: cxt_arc.getActions() }) requestAnimationFrame(rander); } rander() }, })
对requestAnimationFrame的解释
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
canvas的arc参数
arc(圆的中心位置x坐标,圆的中心位置y坐标,圆的半径,开始的角度,结束的角度,顺时针还是逆时针[true是逆时针])
再放一张圆的角度图,
![](https://images2015.cnblogs.com/blog/899994/201703/899994-20170308164405781-887253942.jpg)
这样就完成了对一个圆的动态画布的绘制