您的位置：首页 > 其它

canvas动画圆形扩散

2017-06-08 22:52 141 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div id="box" style="width:600px;height:600px;margin:0 auto;border:2px solid #000;background:#000;"></div>

<script type="text/javascript">

var canvasList = document.getElementById('box');

var canvas = document.createElement('canvas');

canvasList.appendChild(canvas);

canvas.width = 600; //

canvas.height = 600;

var context=canvas.getContext("2d");

var width=600,height=600;

var arr = [];

for(var i=0;i<10;i++){

arr.push({x:parseInt(Math.random()*canvas.width),y:parseInt(Math.random()*canvas.height)});

};

var radius=10;

//创建构造函数Circle

function Circle(x,y,radius){

this.xx=x;//在画布内随机生成x值

this.yy=y;

this.radius=radius;

};

Circle.prototype.radiu=function(){

radius += 0.5; //每一帧半径增加0.5

if (this.radius >= 20) {

radius = 10;

};

};

// 绘制圆形的方法

Circle.prototype.paint=function(){

context.beginPath();

context.arc(this.xx,this.yy,10,0,Math.PI*2);

context.fillStyle="rgba(250,250,50,1)";//填充颜色,默认是黑色

context.fill();//画实心圆

context.closePath();

context.lineWidth = 2; //线条宽度

context.strokeStyle = 'rgba(250,250,50,1)'; //颜色

context.stroke();

this.paintkong();

this.paintkong(0);

this.paintkong(10);

this.paintkong(20);

};

Circle.prototype.paintkong=function(num){

context.beginPath();

context.arc(this.xx,this.yy,this.radius+num,0,Math.PI*2);

context.closePath();

context.lineWidth = 1; //线条宽度

context.strokeStyle = 'rgba(250,250,50,1)'; //颜色

context.stroke();

};

// 创建

var newfun = null;

function createCircles(){

for(var j=0;j<arr.length;j++){

newfun = new Circle(arr[j].x,arr[j].y,radius);//调用构造函数

newfun.paint();

};

newfun.radiu();

};

createCircles()

// 创建临时canvas

var backCanvas = document.createElement('canvas'),

backCtx = backCanvas.getContext('2d');

backCanvas.width = width;

backCanvas.height = height;

//设置主canvas的绘制透明度

context.globalAlpha = 0.7;

//显示即将绘制的图像，忽略临时canvas中已存在的图像

backCtx.globalCompositeOperation = 'copy';

var render = function() {

//先将主canvas的图像缓存到临时canvas中

backCtx.drawImage(canvas, 0, 0, width, height);

//清除主canvas上的图像

context.clearRect(0, 0, width, height);

//在主canvas上画新圆

createCircles();

//新圆画完后，再把临时canvas的图像绘制回主canvas中

context.drawImage(backCanvas, 0, 0, width, height);

};

setInterval("render()", 100);

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航