clearRect 渐变透明

Question

我已经在我的透明 canvas 上画了一些形状。

准确地说，有很多动画圆圈。

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

编辑

见下图；我在右边的效果之后，而不是我目前使用 clearRect()

的半圆切割

有人有想法吗？

Answer 1

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

Answer 2

您可以创建一个带有 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

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

clearRect 渐变透明

clearRect with fade to transparent

html

canvas

html5-canvas