[Java教程]小程序利用画布动态画圆
0 2017-03-09 00:00:28
w
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是逆时针])
再放一张圆的角度图,
这样就完成了对一个圆的动态画布的绘制
本文网址:http://www.shaoqun.com/a/303146.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
小程序
0