js canvas实现简单的图像扩散效果


Posted in Javascript onJune 28, 2020

本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下

<!DOCTYPE HTML> 
<html> 
<body> 
 
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 
 
<script type="text/javascript"> 
 
var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10; 
var lc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839"; 
var lr1,lr2,lr3; 
 
 
drawarc(15,"#CAE1FF",1); 
drawarc(25,"#98FB98",2); 
drawarc(25,"#757575",3); 
 
drawarc(30,"#000000",1); 
drawarc(35,"#32CD32",2); 
drawarc(50,"#6959CD",3); 
 
 
drawarc(45,"red",1); 
drawarc(50,"#fff",2); 
drawarc(65,"#000",3); 
 
 
function drawarc(radiu,ecolor,type){ 
 var grd; 
 var x,y,r; 
 var scolor; 
  switch(type){ 
  case 1: 
   x=x1; 
   y=y1; 
   r=lr1; 
   lr1=radiu; 
   scolor=lc1; 
  break; 
  case 2: 
   x=x2; 
   y=y2; 
   r=lr2; 
   lr2=radiu; 
   scolor=lc2; 
  break; 
  case 3: 
   x=x3; 
   y=y3; 
   r=lr3; 
   lr3=radiu; 
   scolor=lc3; 
   break; 
  default: 
  } 
 grd=cxt.createRadialGradient(x,y,r,x,y,radiu); 
 grd.addColorStop(0,scolor); 
 grd.addColorStop(1,ecolor); 
 cxt.fillStyle=grd; 
 cxt.beginPath(); 
 cxt.arc(x,y,radiu,0,360,false); 
 cxt.closePath(); 
 cxt.fill(); 
} 
</script> 
 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 #Javascript
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
JavaScrip数组删除特定元素的几种方法总结
Sep 06 #Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
JavaScript学习笔记之函数记忆
Sep 06 #Javascript
node.js实现的装饰者模式示例
Sep 06 #Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 #Javascript
You might like
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
从零学Python之入门(四)运算
2014/05/27 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python实现excel读写数据
2021/03/02 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
专业技术职务聘任书
2014/03/29 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
生日宴会祝酒词
2015/08/10 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js