【HTML5・javascript】HTMLに四角を描く
【今回の紹介】
気晴らしにHTML5の学習を行ったので、そのメモをのせます
【内容】
やったことは
HTMLに四角を描く
です。
■手順
①canvasをタグを配置する
②スクリプトでcanvasタグのobjを取得
③canvasobjのgetContextで2Dで書くことを設定する
④塗りつぶすのか枠線だけ描くのか決める(fillかstrokeか)
④canvasobjのプロパティに描く色を設定する
⑤canvasobjのプロパティに描くサイズを設定する(相対的な位置)
簡単に描けました
■参考ソース
<html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body> <h1>キャンバス</h1> <canvas id='canvas1'width='400'height='400'></canvas> <script> //ページ読み込み後に処理を行う window.onload=function(){ var canvas=$("canvas1"); draw(canvas); } function draw(target){ var context=target.getContext('2d'); context.fillStyle='#FFF000'; context.fillRect(0,0,400,400); context.fillStyle="red"; context.strokeStyle="blue"; context.fillRect(0,0,100,100); context.strokeRect(50,50,100,100); } //DOMobjを取得 function $(id){ return document.getElementById(id); } </script> </body> </html>