默认情况下,画布是透明的。
尝试设置页面背景图像,然后在其上放置画布。如果没有在画布上绘制任何内容,则可以完全看到页面背景。
把画布想象成在玻璃板上作画。
要在绘制后清除画布,只需使用 clearRect
:
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
我相信您正在尝试做我刚刚尝试做的事情:我想要两个堆叠的画布......底部的一个有一个静态图像,顶部的一个包含动画精灵。由于动画的原因,您需要在开始渲染每个新帧时将顶层的背景清除为透明。我终于找到了答案:它没有使用 globalAlpha,也没有使用 rgba() 颜色。简单有效的答案是:
context.clearRect(0,0,width,height);
如果您希望特定的 <canvas id="canvasID">
始终透明,您只需设置
#canvasID{
opacity:0.5;
}
相反,如果您希望画布区域内的某些特定元素是透明的,则必须在绘制时设置透明度,即
context.fillStyle = "rgba(0, 0, 200, 0.5)";
opacity
更改将无效。
只需将画布的背景设置为透明即可。
#canvasID{
background:transparent;
}
将两个画布绘制到第三个画布上。
我有同样的问题,这里的解决方案都没有解决我的问题。我有一个不透明的画布,上面有另一个透明的画布。不透明的画布完全不可见,但页面主体的背景是可见的。顶部透明画布上的绘图可见,而下面的不透明画布则不可见。
无法评论最后一个答案,但修复相对容易。只需设置不透明画布的背景颜色:
#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas
我不确定,但看起来背景颜色是从身体透明继承的。
fillStyle
可能不是您要查找的内容,因为它无法真正清除画布;它会用纯色或不涂任何东西的透明颜色来绘制它。
对我有用的技巧依赖于有关 <canvas></canvas>
的实现细节。它们在调整大小时“重置”(在 Chrome 和 Firefox 上测试):
canvas.width = canvas.width
这种现象最初让我觉得很烦人,但它也成为我知道硬重置画布的唯一方法。
如果您要导出画布,请记住导出为 png
!
去过那里,失败了xD
下面是画布默认透明度的一个最小概念证明,并使用 position: absolute
将它们堆叠在一起:
const canvases = [...Array(4)] .map(() => document.createElement("canvas")); canvases.forEach((canvas, i) => { document.body.appendChild(canvas); const ctx = canvas.getContext("2d"); const 饱和度 = 100 / canvases.length * (i + 1); ctx. strokeStyle = `hsl(160, ${saturation}%, 60%)`; ctx.lineWidth = 10; ctx.strokeRect(i * 50 + 10, i * 15 + 10, 100, 80); });画布{位置:绝对;边框:1px纯黑色; }
不定期副业成功案例分享