wulin.comの記事紹介(www.vevb.com):html5-canvasタグドラウング長方形。
<!doctype html>
<html>
<head>
<メタcharset = 'utf-8'>
<title> html5-canvasタグ - ドラウの長方形</title>
</head>
<body>
<canvas id = 1 width = 200 height = 200> </canvas>
<script type = text/javascript>
window.onload = function(){
var canva = document.getElementById( '1')
var content = canva.getContext( '2d')
content.fillstyle = #ccc; //キャンバスの背景色を埋めます
content.fillrect(0、0、200、200); //パラメーターは、それぞれx軸、y軸、幅、高さを表します
content.linewidth = 4; //境界幅
content.strokestyle = #fff; //ボーダーカラー
content.Strokerect(50,50,100,100); //境界座標とサイズ
content.fillstyle =#f00; //長方形の塗りつぶし色
content.fillrect(50,50,100,100); //長方形の座標とサイズ
}
</script>
</body>
</html>