canvas 实现简单的图像扩散

灰太狼 2022-06-09 12:55 208阅读 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 条评论，208人围观）

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

相关阅读

相关使用基于非线性扩散的PM算法进行图像去噪的Matlab代码实现

图像去噪是数字图像处理中的重要任务之一，它旨在恢复由噪声污染的图像的原始内容。非线性扩散的PM（Perona-Malik）算法是一种常用的图像去噪方法，它通过在图像中进行非线性

淡淡的烟草味﹌/ 2023年10月16日 09:37/ 0 赞/ 33 阅读

相关 Canvas实现图像裁剪保存（含demo）

> 打算用canvas实现一个简单的图片裁剪的功能（类似于上传头像并裁剪） > 先分析一下需求点： > > 上传一张图片（图片来源会实现两种途径：1、本地上传 2

淩亂°似流年/ 2023年07月15日 09:21/ 0 赞/ 11 阅读

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

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

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

相关 canvas(图像)

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

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

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

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

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

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

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

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

相关 html5 canvas 图像处理

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

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

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

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

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

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

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

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

相关简单的canvas动画原理

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

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