HTML5_CANVAS畫布_矩形
阿新 • • 發佈：2018-12-14
1.HTML程式碼
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width='900' height='600' style='border:1px solid red;'></canvas>
</body>
</html>
2.JS CANVAS
<script>
//獲取canvas上下文為ctx
var ctx=document.getElementById("canvas").getContext('2d')；
//設定canvas線的寬度
ctx.lineWidth=5;
//設定canvas畫筆的顏色
ctx.strokeStyle="rgb(255,0,0)";
//利用canvas畫筆畫矩形圖 ctx.strokeRect(x,y,寬度，高度)
ctx.strokeRect(100，50，200，300)；
//利用canvas畫出實心矩形
ctx.fillStyle="rgb(0,255,0)";
ctx.fillRect(100,80,100,200);
//在實心矩形上面新增邊框
ctx.strokeRect(100,80,100,200);
</script>