Lukis konteks segi empat tepat.fillRect(x,y,width,height) strokeRect(x,y,width,height)
, ia adalah asal asal Anda akan memahaminya apabila anda menulis tentang ubah bentuk kemudian. Ia tidak penting buat masa ini) > Ketinggian: Ketinggian segi empat tepat
Buat halaman HTML, tetapkan label kanvas
Tulis js, dapatkan objek dom kanvas <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
//第三步：指定绘制线样式、颜色
context.strokeStyle = "red";
//第四步：绘制矩形，只有线。内容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
</html>bahagian seterusnya
