Форум

Solovei95 · #1 (**permalink**) 24.09.2011, 13:07

Простая анимация шума!
Кстати, как запустить прямо здесь?

<!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>

Gozar · #2 (**permalink**) 27.09.2011, 13:55

[html run]

Gozar · #3 (**permalink**) 27.09.2011, 14:12

Можно делать такие прикольные штуки

:

<!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>

Форум

Справочник

Discord чат

Курсы javascript