html5 canvas绘制放射性渐变色效果代码实例
程序员文章站
2022-03-27 09:46:33
...
本文主要介绍了html5 canvas绘制放射性渐变色效果,需要的朋友可以参考下,希望能帮助到大家。
效果图展示:
canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错....
这里用到了createRadialGradient这个API 这个API接收6个参数,前三个表示底下的圆,后三个表示上面的圆,返回的实例依然可以用addColorStop
can2_context是getContext的canvas绘图上下文环境
function Radia(bottom_x,bottom_y,bottom_r,top_x,top_y,top_r){ this.bottom_x=bottom_x; this.bottom_y=bottom_y; this.bottom_r=bottom_r; this.top_x=top_x; this.top_y=top_y; this.top_r=top_r; this.gradient=can2_context.createRadialGradient(this.bottom_x,this.bottom_y,this.bottom_r,this.top_x,this.top_y,this.top_r) } Radia.prototype.addColor=function(){ for(var i=0;i<arguments.length;i++){ this.gradient.addColorStop(arguments[i].num,arguments[i].color) } } Radia.prototype.draw=function(x1,y1,x2,y2){ can2_context.fillStyle=this.gradient; can2_context.fillRect(x1,y1,x2,y2) } var some1=new Radia(canvas_2.width/2, canvas_2.height-100, 0, canvas_2.width/2, 0, 300) some1.addColor({num:0.2,color:"blue"},{num:1,color:"yellow"},{num:0.7,color:"white"}) some1.draw(0, 0, canvas_2.width, canvas_2.height)
相关推荐:
以上就是html5 canvas绘制放射性渐变色效果代码实例的详细内容,更多请关注其它相关文章!
上一篇: 在html中图像标签是什么意思
下一篇: css怎样设置div的最大高度
推荐阅读
-
实例讲解使用HTML5 Canvas绘制阴影效果的方法
-
html5 canvas绘制矩形和圆形的实例代码
-
html5 canvas绘制矩形和圆形的实例代码
-
详细介绍HTML5 canvas基本绘图之绘制线段代码实例
-
实例讲解使用HTML5 Canvas绘制阴影效果的方法_html5教程技巧
-
html5如何使用canvas绘制“钟表”图案?(代码实例)
-
实例讲解使用HTML5 Canvas绘制阴影效果的方法_html5教程技巧
-
html5 Canvas绘制线条 closePath()实例代码 _html5教程技巧
-
html5 canvas绘制放射性渐变色效果代码实例
-
html5 canvas绘制矩形和圆形的实例代码