html5 canvas绘制放射性渐变色效果


Posted in HTML / CSS onJanuary 04, 2018

效果图展示:

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 相关文章推荐
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 #HTML / CSS
详解Html5原生拖拽操作
Jan 12 #HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 #HTML / CSS
canvas烟花特效锦集
Jan 17 #HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 #HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 #HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 #HTML / CSS
You might like
收音机术语解释
2021/03/01 无线电
php代码优化及php相关问题总结
2006/10/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
Python Socket编程详细介绍
2017/03/23 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
24式加速你的Python(小结)
2019/06/13 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
.net开发工程师面试题
2014/02/25 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
医院实习介绍信
2014/01/12 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016年教代会开幕词
2016/03/04 职场文书
实战Python爬虫爬取酷我音乐
2022/04/11 Python