用过canvas的人都知道，在这个画布上面可以制作各种各样的动画效果，想必大家都用过这个。
晒晒刚刚用这个做的一个demo：
现在来画一个圆看看:
demo.js:
var can,ctx,count = 1,w,h,i;
can = document.getElementById(‘can‘);
ctx = can.getContext(‘2d‘);
w = document.body.scrollWidth;
h = document.body.scrollHeight;
can.setAttribute(‘width‘,w)
can.setAttribute(‘height‘,h)
// angle for
angle = Math.PI/2 * count;
x = w/2 + Math.sin(angle);
y = h/2 + Math.sin(angle);
ctx.beginPath();
ctx.arc(x,y ,h/6,0,2*Math.PI);
ctx.fillStyle = ‘#3ff‘;
ctx.strokeStyle = ‘#333‘;
ctx.stroke();
ctx.fill();
对应的.html：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body bgColor=‘#000‘>
<canvas id="can"></canvas>
<script src="js/demo.js"></script>
</body>
</html>
这个太单调了，我们可以把angle这段代码循环一下，看看demo是什么效果？
demo.js:
for( i = 0; i <count;i++){
angle = Math.random(Math.PI/2 * i);
x = (w/3)*Math.sin(angle);
y = h/3 + (1 + angle)*Math.sin(angle);
ctx.beginPath();
ctx.arc(2*x,y,h/8,0,2*Math.PI);
ctx.fillStyle = ‘#3ff‘;
ctx.strokeStyle = ‘#000‘;
ctx.stroke();
ctx.fill();
}
不想那么单调放水平，也可以这样有弧度：
有了它以后想做什么(神马)都可以! -/-
时间： 2024-12-07 20:01:33