使用畫布在同一時間動畫形狀

Question

1.我想能夠使用畫布同時動畫形狀，但每一邊都可以。 2.然後當鼠標放在每個圓周上出現一個文本。我的畫布知識並不是很棒，這裏是一個圖像來顯示我想要的東西。

任何人都會談到如何做到這一點？下面是我所管理

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var canvas01 = document.getElementById("canvas01"); 
var ctx01 = canvas01.getContext("2d"); 

canvas.width = 600; 
canvas.height = 600; 
canvas01.width = 600; 
canvas01.height = 600; 
var centerX = canvas01.width/2; 
var centerY = canvas01.height/2; 
var cw = canvas.width; 
var ch = canvas.height; 
var nextTime = 0; 
var duration = 2000; 
var start = Date.now(); 
var end = start + duration; 
var endingPct = 100; 
var endingPct1 = 510; 
var pct = 0; 
var pct1 = 0; 
var i = 0; 
var increment = duration; 
var angle = 0; 
var background = new Image(); 
var img = new Image(); 
img.src = "http://uupload.ir/files/2fhw_adur-d-01.jpg"; 
//http://uupload.ir/files/2fhw_adur-d-01.jpg 
background.src = "http://uupload.ir/files/9a2q_adur-d-00.jpg"; 
//http://uupload.ir/files/9a2q_adur-d-00.jpg 

Math.inOutQuart = function(n) { 
    n *= 2; 
    if (n < 1) 
     return 0.5 * n * n * n * n; 
    return -0.5 * ((n -= 2) * n * n * n - 2); 
}; 
background.onload = function() { 
    ctx.drawImage(background, 0, 0); 
}; 

function animate() { 
    var now = Date.now(); 
    var p = (now - start)/duration; 
    val = Math.inOutQuart(p); 

    pct = 101 * val; 
    draw(pct); 

    if (pct >= (endingPct)) { 
     start = Date.now(); 
     return animate1(); 
    } 
    if (pct < (endingPct)) { 
     requestAnimationFrame(animate); 
    } 

} 

function animate1() { 
    var now1 = Date.now(); 
    var p1 = (now1 - start)/duration; 
    val = Math.inOutQuart(p1); 
    pct1 = centerY + 211 * val; 
    SmallCircle(pct1); 
    if (pct1 < (endingPct1)) { 
     requestAnimationFrame(animate1); 
    } 
} 

function draw(pct) { 
    var endRadians = -Math.PI/2 + Math.PI * 2 * pct/100; 
    ctx.beginPath(); 
    ctx.arc(canvas.width/2, canvas.height/2, 180, -Math.PI/2, endRadians); 
    ctx.lineTo(canvas.width/2, canvas.height/2); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
    ctx.save(); 
    ctx.clip(); 
    ctx.drawImage(img, 0, 0); 
    ctx.restore(); 

} 

animate(); 
function SmallCircle(pctt) { 

    ctx01.clearRect(0, 0, canvas01.width, canvas01.height); 
    ctx01.beginPath(); 
    ctx01.arc(centerX, pctt, 7, 0, 2 * Math.PI, false); 
    ctx01.closePath(); 
    ctx01.fillStyle = 'green'; 
    ctx01.fill(); 

} 

Answer 1

您可以使用轉換提請您在離標誌中心的半徑延長小圓圈一個fiddle。

下面是示例代碼和演示：

的smallCircle功能讓您指定這些設置：

• X & Y中的標誌中心：cx,cy，
• 小圓圈來自徽標中心的當前半徑：pctt，
• 的smallCircle的VS標識中心角度：angle，
• 文本繪製：text，
• 的smallCircle填充顏色：circlecolor，
• 圓弧圓筆劃顏色：arccolor（如果你不想弧圈出現，你可以指定transparent爲arccolor）
• 文本顏色：textcolor（如果你不想顯示的文字，你可以指定transparent爲textcolor）

var canvas=document.getElementById("canvas01"); 
 
var ctx01=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 

 
var cx=canvas.width/2; 
 
var cy=canvas.height/2; 
 
var PI2=Math.PI*2; 
 
var smallCount=8; 
 
var pctt=0; 
 
var chars=['A','B','C','D','E','F','G','H']; 
 

 
var circleFill='green'; 
 
var arcStroke='lawngreen'; 
 
var textFill='white'; 
 
ctx01.textAlign='center'; 
 
ctx01.textBaseline='middle'; 
 

 
animate(performance.now()); 
 

 
function animate(time){ 
 
    ctx01.clearRect(0, 0, canvas01.width, canvas01.height); 
 
    for(var i=0;i<smallCount;i++){ 
 
    smallCircle(
 
     cx,cy,pctt,PI2/smallCount*i, 
 
     chars[i],circleFill,'transparent','transparent'); 
 
    } 
 
    pctt+=1; 
 
    if(pctt<100){ 
 
    requestAnimationFrame(animate); 
 
    }else{ 
 
    for(var i=0;i<smallCount;i++){ 
 
     smallCircle(
 
     cx,cy,pctt,PI2/smallCount*i, 
 
     chars[i],circleFill,arcStroke,textFill); 
 
    } 
 
    } 
 
} 
 

 
function hilightCircle(n){} 
 
function smallCircle(cx,cy,pctt,angle,text,circlecolor,arccolor,textcolor){ 
 
    // move to center canvas 
 
    ctx01.translate(cw/2,ch/2); 
 
    // rotate by the specified angle 
 
    ctx01.rotate(angle); 
 
    // move to the center of the circle 
 
    ctx01.translate(pctt,0); 
 
    // draw the filled small circle 
 
    ctx01.beginPath(); 
 
    ctx01.arc(0,0,7,0,PI2); 
 
    ctx01.closePath(); 
 
    ctx01.fillStyle = circlecolor; 
 
    ctx01.fill(); 
 
    // stroke the outside circle 
 
    ctx01.beginPath(); 
 
    ctx01.arc(0,0,7+5,0,PI2); 
 
    ctx01.closePath(); 
 
    ctx01.strokeStyle=arccolor; 
 
    ctx01.stroke(); 
 
    // unrotate so the text is upright 
 
    ctx01.rotate(-angle); 
 
    // draw the text 
 
    ctx01.fillStyle=textcolor; 
 
    ctx01.fillText(text,0,0); 
 
    // reset all transforms to default 
 
    ctx01.setTransform(1,0,0,1,0,0); 
 
}

body{ background-color:gray; } 
 
canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>After animation, click the mouse.</h4> 
 
<canvas id="canvas01" width=300 height=300></canvas>