canvas 实现简单的图像扩散

灰太狼 2022-06-09 12:55 199阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关病毒扩散

病毒扩散 Description 2019-ncov的突然出现扰乱了人们的日常生活，它具有极强的传染性，可以快速的在人群中扩散，现在研究人员正在模拟其在人群中的扩散情

旧城等待，/ 2022年12月24日 05:54/ 0 赞/ 122 阅读

相关图像基本处理算法的简单实现（一）

[原文地址链接][Link 1] 一、引言图像处理基本算法整理。拿来举例的实现代码是在JNI方法内直接实现的，且传

我不是女神ヾ/ 2022年08月06日 01:16/ 0 赞/ 147 阅读

相关 canvas 实现简单的图像扩散

canvas 实现简单的图像扩散 <!DOCTYPE HTML> <html> <body> <canvas id="myC

灰太狼/ 2022年06月09日 12:55/ 0 赞/ 200 阅读

相关 canvas(图像)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

本是古典何须时尚/ 2022年06月03日 02:54/ 0 赞/ 182 阅读

相关使用canvas实现简单的时钟效果

> 这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 > > 完整实现效果截图如上![SouthEast][] 关键点 > 时钟效果的实现主要分为3部分

女爷i/ 2022年06月01日 05:38/ 0 赞/ 276 阅读

相关 js实现canvas简单的验证码

首先，canvas：固定在浏览器上的画布，浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和

秒速五厘米/ 2022年02月05日 03:13/ 0 赞/ 272 阅读

相关 html5 canvas 图像处理

1.图像放大缩小 <script> var cvs = document.getElementById("canvas");

左手的ㄟ右手/ 2021年12月22日 10:39/ 0 赞/ 369 阅读

相关 canvas系列--图像处理(四) 图像添加水印

![20170301160019290][] 从上一章 [ canvas系列--图像处理(三) 图像缩放][canvas_--_]的列子来说一.知识点 1.要清楚理解d

阳光穿透心脏的1/2处/ 2021年09月11日 08:24/ 0 赞/ 490 阅读

相关 canvas系列--图像处理(三) 图像缩放

![20170301142939997][] 图像缩放一.首先分析原理 ![20170301143913221][] 如图所示：每一次都显示整个图像，只不过显示

àì夳堔傛蜴生んèń/ 2021年09月11日 08:24/ 0 赞/ 1018 阅读

相关简单的canvas动画原理

简单的canvas动画原理一般就是如下步骤： setInterval( function()\{ draw(ctx); upda

痛定思痛。/ 2021年09月11日 08:06/ 0 赞/ 337 阅读