Canvas.getContext() - キャンパスに描画するコンテキストを取得

<div id="parent"> <canvas id="target"></canvas> </div> <p><a id="method1">実行</a></p> <p><a id="method2">リセット</a></p>

#parent { border: 1px solid #333 ; padding: 18px 0 ; } #target { display: block ; background: #f2f2f2 ; margin: 0 auto ; width: 200px ; height: 200px ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳ Ｐゴシック","Osaka" ; } code { background: #f2f2f2 ; }

// キャンパス要素を取得 var canvas = document.getElementById( "target" ) ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // キャンパスの描画領域を指定する canvas.width = 200 ; canvas.height = 200 ; // 矩型を作成する context.rect( 0, 0, 200, 200 ) ; // 塗りつぶしの色を指定する context.fillStyle = "#D36015" ; // 塗りつぶす context.fill() ; } ) ; // リセット document.getElementById( "method2" ).addEventListener( "click", function() { // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; } ) ;