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 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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/03 新手入门
phpwind中的数据库操作类
2007/01/02 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python中 Lambda表达式全面解析
2016/11/28 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python清理子进程机制剖析
2017/11/23 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
详解Python的循环结构知识点
2019/05/20 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
十八届三中全会感言
2014/03/10 职场文书
团购业务员岗位职责
2014/03/15 职场文书
预备党员综合考察材料
2014/05/31 职场文书
安全守法证明
2015/06/23 职场文书
社团招新宣传语
2015/07/13 职场文书
开学典礼校长致辞
2015/07/29 职场文书
python获取带有返回值的多线程
2022/05/02 Python