js canvas实现简单的图像扩散效果

2024-10-12 06:00:01

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

使用canvas进行图像编辑的实例

前面的话本文将分为几个小功能的形式来详细介绍canvas图像编辑缩放下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra
canvas实现图像截取功能

本文实例为大家分享了canvas图像截取的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像截取</title> <style> canvas{ border: 1px dashed red; float: left; position: r
canvas实现图像放大镜

本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-放大镜</title> <style> body{ padding: 0px; margin: 0px; } #canvas{ border: 1p
canvas实现图像布局填充功能

本文实例为大家分享了canvas图像布局填充的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像布局填充</title> <style> #canvas{ border: 1px solid palevioletred; } </sty
PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas
Android开发之图形图像与动画(一)Paint和Canvas类学习

Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重
js canvas实现简单的图像扩散效果

本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> Your browser does not support the canv
JS实现超简单的鼠标拖动效果

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo
JS实现自定义简单网页软键盘效果代码

本文实例讲述了JS实现自定义简单网页软键盘效果.分享给大家供大家参考,具体如下: 这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学习,希望对您有用处. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
JS+canvas绘制的动态机械表动画效果

本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px
JS实现的简单折叠展开动画效果示例

本文实例讲述了JS实现的简单折叠展开动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:rel
原生js canvas实现简单贪吃蛇

本文实例为大家分享了js canvas实现简单贪吃蛇的具体代码,供大家参考,具体内容如下 Js原生贪吃蛇:canvas HTML <canvas id="can"></canvas> CSS #can{ background: #000000; height: 400px; width: 850px; } JS //公共板块 var blockSize = 10; //地图的高宽 var mapW = 300; var mapH = 150; //历史食物var
js+canvas实现简单扫雷小游戏

扫雷小游戏作为windows自带的一个小游戏,受到很多人的喜爱,今天我们就来尝试使用h5的canvas结合js来实现这个小游戏. 要写游戏,首先要明确游戏的规则,扫雷游戏是一个用鼠标操作的游戏,通过点击方块,根据方块的数字推算雷的位置,标记出所有的雷,打开所有的方块,即游戏成功,若点错雷的位置或标记雷错误,则游戏失败. 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块,打开后若不是雷,则会向四个方向扩展 2.可以通过鼠标右键点击未打开的方块来标记雷,第二次点击取消标记 3.可以通过鼠标右键
js编写一个简单的产品放大效果代码

购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能: 1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理: 1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 ----------------------------------------------
js实现一个简单的数字时钟效果

效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8
js+canvas实现动态吃豆人效果

效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>吃豆人V01</title> </head> <body> <canvas id="canvas" width="500px" height="500px&

js canvas实现简单的图像扩散效果

相关推荐

随机推荐