Анимация шума
Простая анимация шума!
Кстати, как запустить прямо здесь?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var timer = 0;
var shom = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();
for(var i=0;i<4000;i++){
ctx.fillRect(Math.random()*canvas.width,Math.random()*canvas.height,1,1);
}
setTimeout(shom,50);
}
shom();
},false);
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>
|
[html run]
|
Можно делать такие прикольные штуки :):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var timer = 0;
var shom = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.fillStyle = "rgb(124,255,118)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();
ctx.fillStyle = "rgb(145,0,0)";
for(var i=0;i<1000;i++){
ctx.fillRect(Math.random()*canvas.width,Math.random()*canvas.height,2,1);
}
setTimeout(shom,50);
}
shom();
},false);
</script>
</head>
<body>
Сегодня и только сегодня в нашей распродаже зеленые кони!
<canvas id="canvas" width="700" height="3"></canvas>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:35. |