同时使用画布制作动画形状

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

您可以使用变换来绘制从徽标中心开始半径延伸的小圆圈。

这是示例代码和演示：

smallCircle函数可让您指定以下设置：

• 徽标中心的X和Y： cx,cy ，
• 小圆圈从徽标中心开始的当前半径： pctt ，
• smallCircle与徽标中心的angle ： 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>