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读取html5 localstorage的值的方法
Jan 04 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python 自动化表单提交实例代码
2017/06/08 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
C面试题
2015/10/08 面试题
机电专业大学生求职信
2013/10/04 职场文书
架构师岗位职责
2013/11/18 职场文书
《老山界》教学反思
2014/04/08 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
深入理解go slice结构
2021/09/15 Golang
如何基于python实现单目三维重建详解
2022/06/25 Python