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
我要來實現基本背景色設置法
首先在此推薦三個目前本人很常用的線上編輯器
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
留言
張貼留言