canvas 实现简单的图像扩散

最新推荐文章于 2024-07-28 16:12:36 发布

wb54979

最新推荐文章于 2024-07-28 16:12:36 发布

阅读量1.6k

点赞数 1

分类专栏： javascript 文章标签： canvas

本文链接：https://blog.csdn.net/wangbo54979/article/details/77863311

版权

本文介绍如何利用HTML5的canvas元素，通过编程方式实现图像的简单扩散效果，涉及canvas的基本操作和图像处理技巧。

摘要由CSDN通过智能技术生成

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