+
1
|
list
|
skin
|
login
|
editor
α-wwwiki
::
animation
user:none
(1343 bytes)
_h1 animation {canvas {@ id="demo" style=" width:550px; height:300px; border:1px solid; box-shadow:0 0 8px; "}} {br} {input {@ type="submit" value="run" onclick="°° var ctx = getId('demo').getContext('2d'); var w = ctx.canvas.width; var h = ctx.canvas.height; var lastX = w * Math.random(); var lastY = h * Math.random(); var hue = 0; function line() { ctx.save(); ctx.translate(w/2, h/2); ctx.scale(0.9, 0.9); ctx.translate(-w/2, -h/2); ctx.beginPath(); ctx.lineWidth = 5 + Math.random() * 10; ctx.moveTo(lastX, lastY); lastX = w * Math.random(); lastY = h * Math.random(); ctx.bezierCurveTo( w * Math.random(), h * Math.random(), w * Math.random(), h * Math.random(), lastX, lastY); hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; ctx.shadowColor = 'white'; ctx.shadowBlur = 10; ctx.stroke(); ctx.restore(); } function blank() { ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(0, 0, w, h); } function draw() { setInterval(line, 50); // 50 setInterval(blank, 60); // 40 } getId('demo').innerHTML = draw(); °°"}} _h2 code _p See [[initial source|http://html5demo.braincracking.org/demo/canvas.php]] and the code's adaptation by opening this page's editor.