1. Home
  2. /
  3. Web technology
  4. /
  5. HTML
  6. /
  7. HTML5
  8. /
  9. Canvas
  10. /
  11. [ HTML5 Canvas] –...

[ HTML5 Canvas] – 教學 畫矩形

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]

[html]
<!DOCTYPE HTML><!– HTML5 宣告 很重要別漏掉–>
<html>
<head>
<style>
body {
margin: 10px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500" style="border:1px solid #000000;"></canvas>
<!– 建立一張 500 x 500 的畫布 加上邊框 以利確認位置及比例 –>
<script>
var canvas = document.getElementById(‘canvas1’);
var context = canvas.getContext(‘2d’);
context.beginPath();
context.rect(125, 125, 200, 250);//(x起始點,y起始點,長,寬)
context.fillStyle = ‘blue’;//填滿藍色
context.fill();//填滿
context.lineWidth = 7;//邊框寬度
context.strokeStyle = ‘black’;//邊框顏色
context.stroke();
</script>
</body>
</html>
[/html]

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]
!去下營經續永站本助幫能就下一點輕輕,話的您到助幫有章文的我果如 如果我的文章有幫助到您的話,輕輕點一下就能幫助本站永續經營下去!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *