canvas 繪製多邊形

在 hahow 買了吳哲宇老師的「動畫互動網頁特效入門(JS/CANVAS)」課程之後,就有一搭沒一搭的看,因為課程內容實在太多了,所以後來索性都跳著看。(我不是業配喔,程度不到~還沒有人要找我業配QQ)

今天一樣是心血來潮的一天,看了一下 第 5 章的第2單元,在教相對座標加上迴圈畫出重複的圖形~

反正就是有一個作業拉,說要畫出12邊形,於是就來實作一下。

 

HTML

首先要先有一個元素

<canvas id="canvas"></canvas>

 

CSS

其實 css 這一整段不是必要的,只是為了讓我們在繪製的時候比較好判別現在人在哪裡而已XD

如果你畫的圖案想要 rwd 的話,最好是加上max-widthmax-height

html,body{
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#canvas{
  border: 1px solid #ccc;
  max-width: 100%;
  max-height: 100%;
}

 

Javascript

乾貨直接上(最近看 youtube 學到的用語XDDD)

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = 400;
canvas.height = 400;

ctx.save();
ctx.translate(200, 200);
ctx.beginPath();
for (let i = 0; i < 12; i++) {
  ctx.rotate(Math.PI / 6);
  ctx.lineTo(100, 100);
}
ctx.closePath();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();

 

畫好之後就是長這樣囉

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。