最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第八堂 – Fun with HTML5 Canvas

XAMPP下载 admin 1096浏览 0评论
 這堂課要做的是一個Canvas(每日一字:Canvas意指帆布;油畫布),大家可以用滑鼠在頁面上作畫,而畫筆會自動改變顏色(紅橙黃綠藍靛紫輪迴)和改變粗細(細變粗再變細)。範例連結如下:
QQ截图20181104163531
邏輯流程

設定<canvas>參數,預設的畫布長、畫布寬、筆色、筆尖…。
設定監聽,mousemove、mousedown、mouseup、mouseout,。
寫mousedown要執行的函式,讓函式能夠以預設顏色、粗細作畫。
加入改變顏色及粗細變數。
課程重點
<canvas>:提供在頁面上畫圖的容器。
getContext():事實上canvas只是提供作畫環境,而作畫這件事主要是Context來執行。因此我們要先有一個Context,const ctx = canvas.getContext(“2d”);。可以看到裡面有個2D參數,所以想必Context也能夠畫3D,但這次就先以2D來介紹。
Context參數:這次實作會用到幾個基本的Context設定
ctx.strokeStyle = ‘#BADA55′;
ctx.lineJoin = ’round’;
ctx.lineCap = ’round’;
分別是畫筆顏色、線條間連結樣式(尖角或圓角)、畫尖樣式(方正頭或圓頭)。
Context作畫:實作作畫的部分是寫在mousedown要執行的函式中,
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
上面這幾行code基本上是共存的,缺一不可。beginPath()是個啟動作畫的函式,moveTo()和lineTo()可以想成是線段的起點和終點,最後stroke()是把線段畫上去。
延伸閱讀
Destructuring Assignment:在實作中老師用這個方法來賦予變數值,如
[lastX, lastY] = [e.offsetX, e.offsetY];,可同時賦予多個變數值。
HSL:實作中所用的色彩標示是採用HSL。HSL就是Hue(色相)、Saturation(飽和度)、Lightness(明亮度)。在這裡用HSL有個好處,就是做顏色變化只需要調整H值,而且H值的範圍是0~360,也是從紅→橙→黃→綠→藍→靛→紫→紅,開始結束都是紅色,因此可以很容易做顏色變化的循環。

转载请注明:XAMPP中文组官网 » 第八堂 – Fun with HTML5 Canvas

您必须 登录 才能发表评论!