Question

我正在尝试在画布上实现动画，就像风扇一样。当你点击路径时，这应该几乎占屏幕的70％，第二和第三路径应该是宽度的15％。

这是我的代码：

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


var el1 = {
    lineWidth: 1,
    fill: "blue",
    points: []
};
var el2 = {
    lineWidth:1,
  fill: 'red',
  points: []
}
var el3 = {
    lineWidth:1,
  fill:'green',
  points:[]
}
var paths = [];
paths.push(el1);
paths.push(el2);
paths.push(el3);


newPoint(50, 50, el1);
newPoint(100, 20, el1);
newPoint(100,180,el1);


newPoint(50,50,el2);
newPoint(90, 155,el2);
newPoint(0, 165, el2);

newPoint(50,50,el3);
newPoint(0, 165, el3);
newPoint(0,20, el3);
draw();

function newPoint(x, y, path) {
    path.points.push({
        x: x,
        y: y
    });
}


function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (p = 0; p < paths.length; p++) {

        var path = paths[p];

        ctx.beginPath();

        ctx.moveTo(path.points[0].x, path.points[0].y);

        for (pt = 1; pt < path.points.length; pt++) {
            var point = path.points[pt];
            ctx.lineTo(point.x, point.y);
        }

        //
        ctx.fillStyle = path.fill;
        ctx.lineWidth = path.lineWidth;
        ctx.fill();

    }

}
$('#redraw').click(function(){
  paths[0].points[2].y = 300;
  paths[1].points[1].y = 300;
  draw();
});

https://jsfiddle.net/kaggqf94/4/

我不确定这是否是实现此动画的最佳方式（而不是那些三角形将是一些带有文本和图像的元素），我无法弄清楚我应该如何让动画更慢，我想我将不得不改变所有代码。

任何建议都会有所帮助，谢谢！

Answer 1

这是一个draw()功能，可以让你用绿色，红色和红色绘制你的“裁剪楔形”。每个蓝色部分从等角度到大角度动画。

您可以通过减少pctIncrement来减慢动画速度，并通过增加pctIncrement来加快动画效果。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='24px arial';

var cx=cw/2;
var cy=ch/2;
var radius=250;
var startAngle=-Math.PI/8;
var totAngle=Math.PI*5/4;
var currentPct=1/3;
var currentColor='Blue';
var pctIncrement=Math.PI*2/6000;

requestAnimationFrame(animate);

function animate(time){
    draw(currentPct,currentColor);
    currentPct+=pctIncrement;
    if(currentPct>0.50){
        currentPct=1/3;
        currentColor=(currentColor=='Blue')?'Red':(currentColor=='Red')?'Green':'Blue';
    }
    requestAnimationFrame(animate);
}

function draw(pct,color){
    var maxAngle=totAngle*pct;
    var minAngle=(totAngle-maxAngle)/2;
    var bsa,bea,rsa,rea,gsa,gea;
    if(color=='Blue'){
        bsa=startAngle;
        bea=rsa=bsa+maxAngle;
        rea=gsa=rsa+minAngle;
        gea=gsa+minAngle;
    }else if(color=='Red'){
        bsa=startAngle;
        bea=rsa=startAngle+minAngle;
        rea=gsa=rsa+maxAngle;
        gea=gsa+minAngle;
    }else{
        bsa=startAngle;
        bea=rsa=startAngle+minAngle;
        rea=gsa=rsa+minAngle;
        gea=gsa+maxAngle;
    }
    ctx.clearRect(0,0,cw,ch);
    fillArc(bsa,bea,'blue');
    fillArc(rsa,rea,'red');
    fillArc(gsa,gea,'green');
    ctx.fillStyle=color;
    ctx.fillText('Expanding',cx,cy-70);
    ctx.fillText(color,cx,cy-40);
}

function fillArc(sa,ea,fill){
    ctx.beginPath();
    ctx.moveTo(cx,cy);
    ctx.arc(cx,cy,radius,sa,ea);
    ctx.closePath();
    ctx.fillStyle=fill;
    ctx.fill();
}

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

<canvas id='canvas' width=300 height=300></canvas>

在画布上平滑点击事件动画

1 个答案: