HTML5_利用canvas_API_製作精美時鐘方法(旋轉/縮放/移動/畫線)_part1

首先一樣開啟



codepen
https://codepen.io/pen/ 


首先我們先定義我們的畫布  利用   canvas  API

接著是JS代碼撰寫

返回一個叫做ctx的對象，該對象提供在二維畫布中繪圖的方法及屬性喔!!!!

好這裡注意  精心巧妙又安排了一個陷阱

有沒有看到右下角出現了  紅色驚嘆號!!

代表程式碼語法打錯瞜~~

這裡做修改

繪製100*50 像素的填充矩形，座標位置以左上點為原點(0,0)出發為(30,80)

context.fillRect( x , y , width , height );

x:矩形左上角的x 坐標
y:矩形左上角的y 坐標
width:矩形的寬度，以像素計
height:矩形的高度，以像素計

=====================================================================

如何在畫布中作移動呢?

此時這個新矩形的起始座標實際上為(100,150)

透過translate方法  會重新建置畫布起始點(另一張畫部)

此時的(0,0)點  應該是在(70,70)的位置
=====================================================================

如何在畫布中作旋轉呢?

透過rotate方法 可以做旋轉(旋轉畫布坐標系統)


angle:旋轉的量，用弧度表示。正值表示順時針方向旋轉，負值表示逆時針方向旋轉。

因為同在  rotate方法此行之下  所以  會一起旋轉喔!

此時只要再添加一行   restore()方法  
即可  回去最上方save當前保存之狀態喔!!!!

密技:  

一個特效(效果)  不管 縮放/移動/旋轉

搭配

一組
contex.save();
......
context.restore(); =====================================================================

如何在畫布中作縮放呢?

原本的圖(縮放之前)

再繪製另一個框框(邊框版的)

座標位置(x,y)縮放了     寬、高也縮放了   看到了嗎!!!!

=====================================================================

如何在畫布中畫直線呢?

透過stroke()方法  可實現兩點連成直線 stroke() 方法會實際地繪製出通過moveTo() 和lineTo() 方法定義的路徑。
默認顏色是黑色。




線段顏色如何改變呢???

透過strokeStyle()方法  可指定線段顏色
出來為藍色的設置
ctx.strokeStyle="#0000ff";   ------>  這裡指定Hex顏色碼給他 ( R->G->B 依照這順序)


透過lineCap方法 可指定線段末端樣式

【lineCap 方法屬性指定線段的末端如何繪製】
線段尾巴末端樣式可分成  以下

"butt" 線條的末點是平直的而且和線條的方向正交，這條線段在其端點之外沒有擴展。

"round" 這個值指定了線段應該帶有一個半圓形的線帽，半圓的直徑等於線段的寬度，並且線段在端點之外擴展了線段寬度的一半。

"square" 這個值表示線段應該帶有一個矩形線帽。這個值和"butt" 一樣，但是線段擴展了自己的寬度的一半。

=====================================================================

如何在畫布中畫曲線/圓呢?

透過arc方法 可繪製圓/曲線依照規定好的座標、角度

這裡分享一個不好笑的笑話給大家跟  arc方法有相關


√-1 2^3 ∑ π and it was delicious!

 (I ate some pie and it was delicious!)



【練習測試連結】
https://codepen.io/anon/pen/adgeWJ


請關注我的部落格  感謝大家~~