支付宝赞助帐号:service@kuitao8.com 

html5 用canvas 制作简单的下雨效果

Created2014-08-07   Views 5255    Author 懒人程序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sonw</title>
</head>
<body>
<div class="main" style="position:relative">
    <div style="width:480px;height:800px;background:url(./1.jpg) repeat scroll 0 0;background-color:#CCCCCC;">
    <canvas id="myCanvas" width="480" height="800" style="position:absolute;left:0;top:0;z-index:5;"></canvas>
    </div>
</div>
<script src="./jquery1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
var W = 480, H = 800, ctx, angle = 0, len = 30, count = 250;
var canvas = $("#myCanvas")[0];
ctx = canvas.getContext('2d');
console.log(W, H);
ctx.strokeStyle = 'rgba(255,255,255, 0.7)';
var run = setInterval(draw, 200);
function draw() {
ctx.clearRect(0, 0, W, H);
xiayus();
}
//画线
function xiayu(x, y, r) {
ctx.beginPath();
ctx.moveTo(x, y);
//console.log(y, len);
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);
}
}
});
</script>
</body>
</html>
上一篇: html5漂亮模板下载
下一篇: HTML5简单实现网页的拍照上传功能
支持键盘 ← →

邮件订阅

订阅我们的精彩内容