λ-wiki
::
canvas:helloworld
+
| 1 |
help
|
pages
|
skin
|
login
|
code
www!k! v.20120610
! CE SITE NECESSITE JAVASCRIPT !
λ-wiki :: éditeur
{h1 canvas:hello world } {div {@ float:left; width:40%; background:#eee;} {canvas {@ id:canvas; height:300; width:300; }} {br} {submit {@ code:code; value:draw;} } {p And more canvas : {a {@ href:http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/;} HERE}} } °°° LE CODE °°° {pre {@ id:code; float:right; width:58%;} °° var draw = function () { var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'rgb(0, 128, 0)'; ctx.lineWidth = 5; var n = 20, delta = 10; for (var i=1; i < n; i++) { var couleur = Math.round(255.0*i/n); ctx.fillStyle = 'rgba('+couleur+',0,0,0.5)'; // opacity : 0.5 ctx.fillRect( 10+delta*i, 20+delta*i, 50, 50 ); ctx.strokeRect( 9+delta*i, 19+delta*i, 52,52 ); } }; $('canvas').innerHTML = draw(); °° }