キャンバスは長(zhǎng)方形を描畫します
長(zhǎng)方形を描く context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x: 長(zhǎng)方形の始點(diǎn)の橫座標(biāo)(座標(biāo)の原點(diǎn)は左上)キャンバスの隅、もちろん正確な元の原點(diǎn)です。後で変形について書くときに理解できるでしょう。今は関係ありません)
y: 長(zhǎng)方形の始點(diǎn)の座標(biāo)
width: 長(zhǎng)方形の長(zhǎng)さ
height: 長(zhǎng)方形の高さ
HTMLページを作成し、キャンバスラベルを設(shè)定します
jsを書いてcanvas domオブジェクトを取得します
CanvasタグのDOMオブジェクトを通じてコン??テキストを取得します
描畫スタイルと色を設(shè)定します
長(zhǎng)方形を描くか、長(zhǎng)方形を塗りつぶします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>請(qǐng)使用支持HTML5的瀏覽器查看本實(shí)例</p>
</canvas>
<!---下面將演示一種繪制矩形的demo--->
<script type="text/javascript">
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：獲取上下文
var context = canvasDom.getContext('2d');
//第三步：指定繪制線樣式、顏色
context.strokeStyle = "red";
//第四步：繪制矩形，只有線。內(nèi)容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
</html>
