我开始将一个圆圈分成不同的部分,使每个部分成为一个菜单项。
<canvas id="myCanvas" width="500" height="500"></canvas>
使用脚本:
var sec = 0;
$(document).ready(function(){
var redrawTimer = setInterval(function(){
// start drawing the chart
init();
//Increment Counter
sec++;
if( sec == 200 ){//After 2 Secs, Stop animation
clearInterval(redrawTimer);
clearInterval(this);
}
},10);
});
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// center the drawing
var x = canvas.width / 2;
var y = canvas.height / 2;
// number of days
var days = 2;
// number of segments
var hours = 8;
var hoursFull = 1;
// one segment represents a menu item so divide degrees by hours
var segmentWidth = 352 / hours;
var segmentWidthFull = 360 / hoursFull;
// begin at 0 and end at one segment width
var startAngle = 1;
var startAngleFull = 1;
var endAngle = segmentWidth;
var endAngleFull = segmentWidthFull;
// how thick you want a segment
var segmentDepth = 80;
function init(){
for(var i=1; i <= days; i++) {
drawSegments(i*segmentDepth, i, sec);
}
}
var prevStart = 1;
var prevEnd = segmentWidth;
function drawSegments(radius,dayNumber) {
for(var i = 0; i < hours; i++){
context.beginPath();
if( dayNumber == 2 ){
context.strokeStyle = '#f7941e';
if( i == 0 ){
prevStart = startAngle;
prevEnd = endAngle;
startAngle = 271 + sec;
endAngle = segmentWidth + 271 + sec;
context.strokeStyle = '#fff';
}else{
startAngle = prevStart;
endAngle = prevEnd;
}
}
else{
context.strokeStyle = 'rgba(0,0,0,0)';
}
context.arc(x, y, radius, (startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false);
context.lineWidth = segmentDepth;
context.stroke();
startAngle += segmentWidth + 1;
endAngle += segmentWidth + 1;
}
}
据我所知,不断重新绘制图像会导致闪烁。有没有办法解决这个问题,因为我没有使用图像加载到缓存中以增加绘制时间?
当谈到画布时,我是一个新手,所以任何帮助都将受到赞赏。
我创建了example
答案 0 :(得分:1)
您的设计需求在您的问题中并不明确,但这里有一些实用功能。
演示:http://jsfiddle.net/m1erickson/Te6N8/
此功能将绘制您的8弧金圆:
var PI2=Math.PI*2;
var cx=150;
var cy=150;
var radius=110;
var arcCount=8;
var angleIncrement=PI2/arcCount;
var divider=PI2/90;
var startTime;
function drawGoldArcs(){
ctx.strokeStyle="gold";
for(var i=1;i<=arcCount;i++){
var starting=angleIncrement*(i-1);
var ending=angleIncrement*(i)-divider;
ctx.beginPath();
ctx.arc(cx,cy,radius,starting,ending);
ctx.stroke();
}
}
此功能将根据已用时间绘制动画白弧:
function drawWhiteArc(elapsed){
var starting=PI2*elapsed/animationDuration-divider;
var ending=starting+angleIncrement;
ctx.beginPath();
ctx.arc(cx,cy,radius,starting,ending);
ctx.strokeStyle="white";
ctx.stroke();
}
此函数使用requestAnimation为金弧周围的白弧设置动画:
function animate(time){
if(!startTime){startTime=time;}
var elapsed=time-startTime;
if(elapsed<animationDuration){requestAnimationFrame(animate);}
ctx.clearRect(0,0,canvas.width,canvas.height);
drawGoldArcs();
drawWhiteArc(elapsed);
}