[英]HTML5 spin circle
I am trying to spin a circle on a canvas, i think i got most of the code but i don't know whats wrong with the code, the circle is not spinning. 我正在尝试在画布上旋转一个圆圈,我想我已经掌握了大部分代码,但是我不知道代码出了什么问题,圆圈没有旋转。 Do i need to create another function in order to spin the circle? 我是否需要创建另一个函数来旋转圆圈? any suggestions 有什么建议么
http://jsfiddle.net/qY85C/1/ http://jsfiddle.net/qY85C/1/
var angle = 0;
function convertToRadians(degree) {
return degree*(Math.PI/180);
}
function incrementAngle() {
angle++;
if(angle > 360) {
angle = 0;
}
}
var myColor = ["#ECD078","#D95B43"];
var myData = [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50];
function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += myData[j];
}
return myTotal;
}
function drawColoredCircle() {
var lastend = 0;
var myTotal = getTotal();//160
for (var i = 0; i < myData.length; i++) {
ctxBg.fillStyle = myColor[i%2];
ctxBg.translate(canvasBg.width/2, canvasBg.width/2);
ctxBg.rotate(convertToRadians(angle));
ctxBg.translate(-canvasBg.width/2, -canvasBg.width/2);
ctxBg.beginPath();
ctxBg.moveTo(canvasBg.width/2,canvasBg.width/2);
ctxBg.arc(canvasBg.width/2,canvasBg.height/2,500,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);
ctxBg.lineTo(canvasBg.width/2,canvasBg.height/2);
ctxBg.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}
function loop(){
drawColoredCircle();
requestAnimFrame(loop);
}
You need to change the angle inside your loop 您需要更改循环内的角度
function loop(){
angle+=Math.PI/18000;
drawColoredCircle();
requestAnimFrame(loop);
}
Also, do you want to clear the canvas before drawing the circle? 另外,是否要在绘制圆之前清除画布?
function loop(){
ctxBg.clearRect(0,0,canvasBg.width,canvasBg.height);
angle+=Math.PI/18000;
drawColoredCircle();
requestAnimFrame(loop);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.