1

我在 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();
}
4

1 回答 1

4

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

当您在 HTML5 画布上绘制某些东西时，它就不再是一个对象，而是变成了画布上的一堆像素。改变这些像素的唯一方法是用其他东西过度绘制它们。这意味着 JQuery 不会在这里工作。

您将不得不手动执行此操作。使用 requestAnimationFrame创建一个渲染循环，它不断地重绘你的场景，但每次迭代都会稍微改变 globalAlpha。

于 2013-10-04T10:33:45.340 回答