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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 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
Protoss魔法科技
2020/03/14 星际争霸
ftp类(myftp.php)
2006/10/09 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python中print函数简单使用总结
2019/08/05 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python实现126邮箱发送邮件
2020/05/20 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
大学生自我鉴定范文模板
2014/01/21 职场文书
银行进社区活动总结
2014/07/07 职场文书
少先队活动总结
2014/08/29 职场文书
文明班级申报材料
2014/12/24 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB