iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

學習 canvas 日記系列 第 3

第 3 天 圖形描邊、畫線

  • 分享至 

  • xImage
  •  

圖形是由最基本的點線面畫出來
再加上 填滿色塊 fill 和描邊 stroke 兩種上色產生

線 描邊產生的和由多個點連線產生下方的圖
https://ithelp.ithome.com.tw/upload/images/20181016/20107496XtxNlrHwl2.jpg

矩形描邊有2種方法
產生的圖形都是一樣的

// 矩形直接上色描邊
ctx.strokeRect(30,30,30,30); // 描邊

// 或是先建立範圍再描邊
ctx.rect(30, 70, 30, 30); 
ctx.stroke();

strokeRect(x, y, width, height)、rect(x, y, width, height)
x, y 是矩型左上起點
width, height 是矩型寬高

多個點連線
舉三角形為例

ctx.moveTo(90,30); // 建立起點
ctx.lineTo(105,60); // 拉線到這個點
ctx.lineTo(75,60);
ctx.closePath(); // 把最後的點和起點封閉
ctx.stroke();

closePath() 封閉連線
或是把最後一個點 = 起點(x, y)
lineTo(90,30)都是一樣
目的都在作像左邊的三角形描邊
https://ithelp.ithome.com.tw/upload/images/20181016/20107496zoS9UcMnCP.jpg
右邊的就是沒有 closePath() 和 lineTo(90,30) 作出來的線

圓形

ctx.beginPath(); // 重置路徑
ctx.arc(130, 45, 15, 0, 2*Math.PI);
ctx.stroke();

arc(x, y, r, sAngle, eAngle, counterclockwise);
x, y 圓的中心點
sAngle, eAngle 起點角度、結束角度
起點角度 = 0
為圓的最右邊和中心呈水平的點
順時針增加角度 單位是 pi
1 pi = 180度

什麼是 pi ?
維基百科這麼說的
圓周率是一個數學常數,為一個圓的周長和其直徑的比率,約等於3.141592653589793,它在18世紀中期之後一般用希臘字母π指代,有時也拼寫為「pi」。

counterclockwise 是轉的方向
False = 順時針轉(預設可省略)
true = 逆時針轉

需要用 beginPath 重置起點
避免和前一個點 "連線"
https://ithelp.ithome.com.tw/upload/images/20181016/20107496ke2whHEOdS.jpg

或是把起點移到圓的起點 ctx.moveTo(145, 45) 也可以

只是要找到 x, y 比較麻煩

上一篇
第 2 天 畫布 = 視窗尺寸
下一篇
第 4 天 範圍內的填色
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言