HTML5 新增的元素 Canvas 功能非常強大。譬如說想要繪製多個連續正方形的圖案。如果使用 Canvas 來繪製的話，會非常的方便又節省時間就能有效率達到想要的效果。範例程式碼如下：
<body>
<canvas id="canvas" width="500" height="500" style="border:1px solid gray;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx_1 = canvas.getContext("2d");
// 進行連續正方形繪製程序，使用兩個 for 迴圈及應用 strokeRect() 方法來繪製出兩個連續正方形圖案。
for(var i=85; i<200; i+=3) {
ctx_1.strokeRect(i+45, i-0, i, i); // 繪製連續正方形
}
for(var i=110; i>60; i -= 10) {
l -= 10;
j = k += 20;
ctx_1.strokeRect(i, l, j, k); // 繪製連續正方形
}
</script>
</body>
沒有留言:
張貼留言