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 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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
一个分页的论坛
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python根据出生年份简单计算生肖的方法
2015/03/27 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
求职信范文怎么写
2014/01/29 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2014年城管工作总结
2014/11/20 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
企业安全生产规章制度
2015/08/06 职场文书
初中政治教学反思
2016/02/23 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android