标签:i++ png text .com 清除 net 效果 pat 长度
前面做了两个简单的效果,这次就来个下雨的效果

思路简单的说一下
随机在屏幕中的位置画雨滴,moveTo(x,y)
雨滴的长度就是lineTo(x,y+len)
每次重新绘制页面,就能达到下雨的效果了
//canvas宽为650,高为474
//angle为倾斜的角度,Len为雨滴的长度,count为雨滴的数量
var W = 650, H = 474, ctx, angle = 0, len = 20, count = 50;
var canvas =document.getElementById("myCanvas");
ctx = canvas.getContext(‘2d‘);
ctx.strokeStyle = ‘rgba(255, 255, 255, 0.2)‘;
var run = setInterval(draw, 100);
function draw() {
//清除上一帧
ctx.clearRect(0, 0, W, H);
//重新绘制
xiayus();
}
function xiayu(x, y, r) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + angle, y + len);
ctx.lineWidth = 2;
ctx.stroke();
}
function xiayus() {
for (var i = 1; i <= count; i++) {
xiayu(Math.random() * W, Math.random() * H, angle);
}
}
标签:i++ png text .com 清除 net 效果 pat 长度
原文地址:http://www.cnblogs.com/anxiaoyu/p/6681824.html