Javascript 如何在HTML5画布中设置上下文填充不透明度的动画？

如何在HTML画布中设置上下文的

填充
不透明度动画（或添加淡入效果）

例如，在下面的示例中，
ctx.fillStyle
fill opacity设置为
0
，如何将其动画设置为
1


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillStyle='rgba（255,165,0,0）'；
ctx.rect（20,20,150,100）；
ctx.fill（）

您的浏览器不支持HTML5画布标记。
您可以通过以下方式实现：


var
/*保存画布的上下文*/
ctx=document.getElementById（“myCanvas”）.getContext（“2d”），
/*起始不透明度*/
不透明度=0，
/*动画的持续时间（毫秒）*/
持续时间=500，
/*缓存自页面加载以来的开始时间（以毫秒为单位）*/
过去=性能。现在（）；
/*动画功能*/
函数动画（当前）{
/*查找上一次和当前时间之间的差异*/
var步骤=现在-过去；
/*将当前时间设置为过去*/
过去=现在；
/*以线性步长增加不透明度*/
不透明度+=步长/持续时间；
/*创建形状*/
ctx.beginPath（）；
ctx.fillStyle=“rgba（255,165,0，“+opacity+”）；
ctx.clearRect（20,20,150,100）；
ctx.rect（20,20,150,100）；
ctx.fill（）；
/*继续动画，直到不透明度为1*/
if（不透明度<1）window.requestAnimationFrame（动画）；
}
/*启动动画*/
window.requestAnimationFrame（动画）

您的浏览器不支持HTML5画布标记。
您可以通过以下方式实现：


var
/*保存画布的上下文*/
ctx=document.getElementById（“myCanvas”）.getContext（“2d”），
/*起始不透明度*/
不透明度=0，
/*动画的持续时间（毫秒）*/
持续时间=500，
/*缓存自页面加载以来的开始时间（以毫秒为单位）*/
过去=性能。现在（）；
/*动画功能*/
函数动画（当前）{
/*查找上一次和当前时间之间的差异*/
var步骤=现在-过去；
/*将当前时间设置为过去*/
过去=现在；
/*以线性步长增加不透明度*/
不透明度+=步长/持续时间；
/*创建形状*/
ctx.beginPath（）；
ctx.fillStyle=“rgba（255,165,0，“+opacity+”）；
ctx.clearRect（20,20,150,100）；
ctx.rect（20,20,150,100）；
ctx.fill（）；
/*继续动画，直到不透明度为1*/
if（不透明度<1）window.requestAnimationFrame（动画）；
}
/*启动动画*/
window.requestAnimationFrame（动画）

您的浏览器不支持HTML5画布标记。
您不能像使用CSS那样“设置动画”。用画布，你在画灵长类动物，所以你必须自己做数学和计时

这是一个从一个值到另一个值的简单线性级数


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
常数持续时间=1000；//太太
常数步长=10；//太太
不透明度=0；
函数绘图（）{
如果（不透明度==1）返回；
不透明度+=（步长/持续时间）；
ctx.clearRect（20,20,150,100）；
ctx.beginPath（）；
ctx.fillStyle=`rgba（255,165,0，${opacity}）`；
ctx.rect（20,20,150,100）；
ctx.fill（）；
设置超时（绘制，步进）；
}
draw（）

您的浏览器不支持HTML5画布标记。
您不能像使用CSS那样“设置动画”。用画布，你在画灵长类动物，所以你必须自己做数学和计时

这是一个从一个值到另一个值的简单线性级数


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
常数持续时间=1000；//太太
常数步长=10；//太太
不透明度=0；
函数绘图（）{
如果（不透明度==1）返回；
不透明度+=（步长/持续时间）；
ctx.clearRect（20,20,150,100）；
ctx.beginPath（）；
ctx.fillStyle=`rgba（255,165,0，${opacity}）`；
ctx.rect（20,20,150,100）；
ctx.fill（）；
设置超时（绘制，步进）；
}
draw（）

您的浏览器不支持HTML5画布标记。
无论谁被否决，是否愿意分享原因？我提出了两个有效的解决方案……谁投了反对票，愿意分享原因吗？我提出了两个可行的解决方案。。。