使用画布同时动画形状

Question

1.我希望能够同时使用画布对形状进行动画处理，但每个都在一侧。 2.然后当鼠标放在每个圆圈上时，它周围会出现一个文本。我的画布知识并不惊人，这是一个显示我想要的图像。

任何人对如何做到这一点有所了解？这是我管理的fiddle

    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,
• 小圆圈当前距离logo中心的半径：pctt,
• smallCircle 与 logo 中心的角度：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>