1. 程式人生 > >HTML5_CANVAS畫布_矩形

HTML5_CANVAS畫布_矩形

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>