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

Question

我在 HTML5 中创建了一个 Canvas ，其中包含一些我希望不断淡入和淡出的 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

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

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

您必须手动实现此操作。创建a rendering loop using requestAnimationFrame它会不断重绘场景，但每次迭代都会稍微改变 globalAlpha。