Introduction to how to use canvas to achieve a simple image diffusion effect-JS Tutorial-php.cn

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

巴扎黑

Release： 2017-09-07 10:22:09

Original

1998 people have browsed it

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>

Copy after login

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!