Home > Article > Web Front-end > Introduction to how to use canvas to achieve a simple image diffusion effect

Introduction to how to use canvas to achieve a simple image diffusion effect

巴扎黑Original: 2017-09-07 10:22:091936browse

This article mainly introduces the simple image diffusion effect of js canvas to everyone in detail. It has certain reference value. Interested friends can refer to it.

The example of this article shares the canvas implementation with everyone. The code for simple image diffusion is for your reference. The specific content is as follows

<!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>

The above is the detailed content of Introduction to how to use canvas to achieve a simple image diffusion effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the path configuration of require.js and the introduction method of cssNext article：Detailed explanation of the path configuration of require.js and the introduction method of css

See more

Introduction to how to use canvas to achieve a simple image diffusion effect

Related articles