clearRect，淡入淡出透明

Question

我在透明画布上画了一些形状。

准确地说很多动画圈。

我想将画布的底部边缘从透明（但带有形状）淡化为完全透明。

修改

见下图;我正在使用右边的效果，而不是我现在使用clearRect()

切成两半的圆圈。

有人有想法吗？

Answer 1

您可以在其中创建包含alpha的渐变（使用rgba()语法）并将其应用于笔触。类似的东西：

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

var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0,"#f00");
gradient.addColorStop(0.75,"rgba(255, 0, 0, 0)");
ctx.strokeStyle = gradient;

ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.stroke();

这是一个快速演示：http://codepen.io/codingcampbell/pen/wMeowa

更改0.75中的addColorStop值会影响渐变的alpha部分的位置。动画可能会很棘手，我认为你需要创建每个停止值的新渐变，因为您无法修改现有停靠点（但可以将这些渐变保留在内存中并与所有形状共享）

Answer 2

最简单的方法是制作一个小的垂直渐变并将其作为橡皮擦应用于整个圆圈。为了实现它的动画效果，只需在每一帧上向上移动（并从圆圈下方开始）。