java动态画圆_[Java教程]小程序利用画布动态画圆

[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