HTML5_canvas_API使用方法

在這次日誌中
我要來實現基本背景色設置法


首先在此推薦三個目前本人很常用的線上編輯器


codepen
https://codepen.io/pen/

頁面

jsfiddle
https://jsfiddle.net/

thimble
https://thimble.mozilla.org/

目前   小編最常使用的是

codepen

我們就先來使用codepen來實現這次的小目標

如何產生最基礎的繪製背景色(使用canvas API)

canvas  是一個容器本身不具繪圖能力
必須結合JS才可繪圖
第一階段-靜態背景色
(rect()方法、fillStyle的方法來進行color_hex設置、
fill()方法進行顏色填充)

https://codepen.io/anon/pen/wMXvzx

ctx.fillStyle = 'Hex碼'; 
Hex碼可自行設置
參考這個網站提供對應的顏色hex碼
color-hex.com : http://www.color-hex.com/




第二階段-靜態背景色(繪製隨機不同位置、大小、透明值的圓)

右下方有【紅色驚嘆號】告訴你
程式碼打錯了

於是我找了一陣子大概一小時
終於找到了
真的是超白癡的錯誤

再來

定義完再使用
JavaScript push() 方法
語法:    arrayObject.push(newelement1,newelement2,....,newelementX)
-->向數組的末尾添加一個或多個元素，並返回新的長度

所以會隨機產生八個不同大小、位置、和透明值的 圓 圖形

最後再定義繪製圓形的方法

成果

在jsfiddle
跑的成果

第三階段-動態網頁遊戲背景製作

但你發現它只會跑一次


所以我們

javascript_dynamic_effect_修正 from Dryjoker on Vimeo.


連結:   https://codepen.io/anon/pen/wMXvzx?editors=1010