これも並行して学んでいければと思います。
GoJSは45以上のサンプルアプリケーションへの完全なJavaScriptの/ HTMLソースが付属しています。
Canvasでできること・できないこと
Canvasでは、線や円といった図形を描いたり、色を塗ったりすることは可能ですが、描いた図を動かすことはできません。つまり、Canvasの仕様には、アニメーションのメソッドがありません。もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返さなければいけません。
fillRect()
strokeRect()
clearRect()
onload = function() { draw1(); draw2(); draw3(); }; /* fillRect()の例 */ function draw1() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillRect(20, 20, 80, 40); } /* strokeRect()の例 */ function draw2() { var canvas = document.getElementById('c2'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.strokeRect(20, 20, 80, 40); } /* clearRect()の例 */ function draw3() { var canvas = document.getElementById('c3'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillRect(20, 20, 100, 100); ctx.beginPath(); ctx.clearRect(50, 70, 60, 30); }
