canvas實現畫板（移動端 h5）

**如下：

<

!doctype html>
"utf-8"
/>
畫板<
/title>
* body 
canvas 
<
/style>
<
/head>
"text-align: center"
>
"600" width=
"900" id=
"canvas"
>
親，您的瀏覽器不支援canvas，換個瀏覽器試試吧！<
/span>
<
/canvas>
<
/div>
window.
onload
=function()
},false
) canvas.
addeventlistener
('touchend'
,(e)
=>
,false)}
,false
) canvas.
addeventlistener
("mousedown"
,(e)
=>
,false
) canvas.
addeventlistener
("mousemove"
,(e)
=>
console.
log(
"我動啦"
) ctx.
lineto
(e.clientx - canvas.offsetleft, e.clienty - canvas.offsettop)
; ctx.
stroke()
;},true
) canvas.
addeventlistener
("mouseup"
,(e)
=>
,false)}
<
/script>
<
/body>
<
/html>實現效果：
1.網頁版（h5端）
2.移動端
h5移動端適配
原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...
移動端h5優化
1 減少js載入體積 很多庫能用cdn的盡量使用cdn，這樣打包出來的js體積會很小，載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui，mintui等 4 儘量減少網路請求數量 程式中的資料，有的能乙個介面返回的盡量乙個介面返回，不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...
移動端H5除錯
背景 開發pc頁面的時候使用chrome瀏覽器的開發者工具，可以很容易的捕獲到頁面的dom元素，並且可以修改樣式，方便除錯 但是手機上卻很麻煩，因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到pc，使用pc的開發者工具檢測。fiddler抓包工具 fiddler是強大的抓包工具...