编程 Javascript

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>

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

- Author -

wangbo54979

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype String对象学习

Jul 19 Javascript

JavaScript 构造函数面相对象学习必备知识

Jun 09 Javascript

深入理解JavaScript系列（44）：设计模式之桥接模式详解

Mar 04 Javascript

基于JS代码实现实时显示系统时间

Jun 16 Javascript

jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

Aug 05 Javascript

vue实现点击选中,其他的不选中方法

Sep 05 Javascript

如何优雅地在vue中添加权限控制示例详解

Mar 07 Javascript

vue 实现搜索的结果页面支持全选与取消全选功能

May 10 Javascript

怎样在vue项目下添加ESLint的方法

May 16 Javascript

p5.js临摹动态图形的方法

Oct 23 Javascript

详解微信小程序之提高应用速度小技巧

Jan 07 Javascript

ant-design-vue 快速避坑指南(推荐)

Jan 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