致力于为轴承产业
提供数字化创新动力

canvas绘制渐变透明的图片

定义和用法

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示:请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。

本人需求是在一张图片上半部分加上黑色到透明的渐变,在底部加上自下而上白色到透明的渐变,就如本站的分享图片上的效果,所以本处记录上下渐变,其它需求可参考Canvas createLinearGradient() 方法 (w3school.com.cn),效果如下:

canvas绘制渐变透明的图片

代码如下(我的站点服务器拦截js代码,复制代码后请将doc ument中间的空格去掉):

var c=doc ument.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,500);
my_gradient.addColorStop(0,"rgba(0, 0, 0, 1)");
my_gradient.addColorStop(0.4,"rgba(0, 255, 0, 0.2)");
my_gradient.addColorStop(0.6,"rgba(0, 0, 255, 0.2)");
my_gradient.addColorStop(1,"rgba(255, 0, 0, 1)");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,500,500);

canvas绘制渐变透明的图片

据说喜欢分享的,后来都成了大神
我们承接公司网站建设,VR拍摄

相关推荐