首页 > web前端 > html/css/css3 > html5 canvas绘图之createLinearGradient,addColorStop 绘制渐变图
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

html5 canvas绘图之createLinearGradient,addColorStop 绘制渐变图

html5 canvas可纵向渐变图形,能定义渐变色、偏移量等元素,下面来看看具体用法。

线性渐变 context.createLinearGradient(xStart,yStart,xEnd,yEnd)  线性渐变

xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标

颜色 addColorStop(offset,color)

offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色

<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
 var context = canvas.getContext("2d"); 
 var op = context.createLinearGradient(0, 0, 0, 300);
 op.addColorStop(0, 'rgb(255,0,0)'); //红 
 op.addColorStop(0.5, 'rgb(0,255,0)');//绿
 op.addColorStop(1, 'rgb(0,0,255)'); //蓝

 //可以把lg对象理解成GDI中线性brush
 context.fillStyle = g1;
 //再用这个brush来画正方形
 context.fillRect(0, 0, 400, 300); 

}
</script>

效果

原理说明图

 

进入html5 canvas绘图详细教程

 

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*