網站畫板基於HTML canvas

5 min readFeb 10, 2019

學到的知識點：

`<canvas>` 元素

<canvas> 是一個替換元素，需要結束標籤</canvas>。它只有兩個標籤：width 和 height，當沒有設置寬高，canvas 會默認為寬300px和高150px（使用CSS設置canvas 的寬高會導致畫布內容模糊）。

the rendering context

canvas 起初是空白的。<canvas> 需要通過腳本，它有一個叫getContext() 方法是用來獲得 rendering context or painting. 對於2D圖像而言，可以使用 CanvasRenderingContext2D。

varcanvas=document.getElementById("canvasCtx"); //為元素<canvas>得到DOM對象
varctx=canvas.getContext("2d"); //使用2d來繪製上下文

繪製形狀：方形 rectangular

ctx.fillRect(x, y, width, height); //繪製一個實心方形
ctx.strokeRect(x, y, width, height); //繪製一個方形邊框
ctx.clearRect(x, y, width, height); //清除指定方形區域，變成透明

繪製路徑

ctx.beginPath(); //開始生成一條路徑
ctx.moveTo(x, y); //路徑移到指定位置
ctx.lineWidth; //設定路徑寬度
ctx.lineTo(x, y); //路徑連接指定位置
ctx.lineTo(x, y); //路徑連接另一指定位置
ctx.fill(); //填充各連接路徑內的區域

JS HTML event

onmousedown = "SomeJavaScriptCode" 滑鼠按下會觸發的事件

onmousemove = "SomeJavaScriptCode" 滑鼠移動會觸發的事件

onmouseup = "SomeJavaScriptCode" 滑鼠鬆開會觸發的事件

針對觸控設備事件

ontouchstart = "SomeJavaScriptCode" 觸控觸發的事件

ontouchmove = "SomeJavaScriptCode" 觸控移動觸發的事件

ontouchend = "SomeJavaScriptCode" 結束觸控觸發的事件

document.documentElement.clientWidth 獲取頁面可見寬度

document.documentElement.clientHeight 獲取頁面可見高度

window.onresize 獲取當前窗口resize事件

element.onclick 返回當前元素的click 的事件

id.classList.add('className') 在指定id位置添加class

id.classList.remove('className')在指定id位置移除class

document.getElementById('id').src=".svg"更改指定id的路徑

TouchList

x.ontouchstart=function(touch){
 如果從touch取得觸控點clientX值// 實際是touch.touches[0].clientX
}

由於觸控設備支援多點觸控，因此不能直接通過 event.clientX / event.clientY 去取得觸控點位置，當使用上述三種事件 ontouchstart、ontouchmove、ontouchend，觸發時會生成一個對象列表，如下：

TouchList{0: Touch, length: 1}
length:1
0:Touch
   clientX:65// 觸摸點在瀏覽器窗口中的橫座標
   clientY:18// 觸摸點在瀏覽器窗口中的縱座標
   force:1// 觸摸點壓力大小
   identifier:0// 觸摸點唯一標識（ID）
   pageX:65// 觸摸點在頁面中的橫座標
   pageY:18// 觸摸點在頁面中的縱座標
   radiusX:11.5// 觸摸點橢圓的水平半徑
   radiusY:11.5// 觸摸點橢圓的垂直半徑
   rotationAngle:0// 旋轉角度
   screenX:560// 觸摸點在屏幕中的橫座標
   screenY:175// 觸摸點在屏幕中的縱座標
target:div#touchLog 觸摸目標
[objectObject]:Touch
[objectObject]:TouchList

這個對象列表記錄了你某觸控點的位置，力度等等。而通過 event.touches[0].clientX event.touches[0].clientY 便可獲取觸控點的位置。

將當前頁面儲存成.png

save.onclick=function(){
   var url=canvas.toDataURL("image/png")
   var a=document.createElement('a')
   document.body.appendChild(a)
   a.href=url
   a.download='mysketch'
   a.target='_blank'
   a.click()
}