ホームページ > 記事 > ウェブフロントエンド > キャンバスを使って簡単に画像拡散効果を実現する方法の紹介
キャンバスを使って簡単に画像拡散効果を実現する方法の紹介
- 巴扎黑オリジナル
- 2017-09-07 10:22:091936ブラウズ
この記事では、簡単な画像拡散効果を実現するための js キャンバスを詳しく紹介します。興味のある方は参考にしてください。この記事の例では、簡単な画像拡散を実装するための 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>以上がキャンバスを使って簡単に画像拡散効果を実現する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。