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




留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題