Question

我在HTML5中创建了一个带有一些ctx对象的画布，我想淡入淡出并不断淡出。我在哪里放jQuery代码？

例如，我为圆形对象提供了以下代码：

function drawClusters(ctx, x, y, r) {

    var startPoint = (Math.PI/180)*0;
    var endPoint = (Math.PI/180)*360;

    ctx.beginPath();
    ctx.arc(x,y,r,startPoint,endPoint,true);
    ctx.fillStyle = "rgb(255,255,204)";
    ctx.globalAlpha = 0.5;

    ctx.fill();
    ctx.closePath();
}

Answer 1

通过更改DOM元素的CSS样式，JQuery效果起作用。但画布不是面向对象的。 HTML5画布就像现实生活中的画布一样。当你在一张纸上画一条线时，之后改变它的唯一方法是用橡皮擦擦掉它（可能还会破坏那里画的其他东西）或在它上面画一些覆盖它的东西。

当您在HTML5画布上绘制内容时，它会停止成为一个对象，并在画布上变成一堆像素。更改这些像素的唯一方法是用其他东西重新绘制它们。这意味着JQuery将不会在这里工作。

您必须手动实现此功能。创建不断重绘场景的a rendering loop using requestAnimationFrame，但每次迭代都会略微更改globalAlpha。

如何使用jQuery淡入淡出HTML5 canvas ctx对象？

1 个答案: