canvas.gif
首先創(chuàng)建一塊畫布
一個用來顯示觸屏區(qū)域坐標(biāo)的p標(biāo)簽
清空,生成圖片兩個按鈕
img顯示生成的圖
<canvas id="myCanvas" width="300" height="200"></canvas>
<div id="operation">
<p id="position"> </p>
<button id="clearCanvas">清空</button>
<button id="success">生成圖片</button>
</div>
<img id="canvasImg" src="" alt="生成的圖片" width="300" height="200">
對贏得css樣式
*{margin: 0;padding: 0;}
#myCanvas{
border:1px solid #333;
display: block;
margin: 0 auto;
}
#operation{
width: 300px;
margin: 10px auto;
}
#position{
width: 100%;
text-align: center;
height: 30px;
}
#canvasImg{
display: block;
margin: 0 auto;
border: 1px dotted #333;
}
給畫布添加touch觸摸事件
用來獲取
當(dāng)前觸摸的坐標(biāo)點相對于畫布的位置,
但在實現(xiàn)過程中發(fā)現(xiàn)touch坐標(biāo)點一直是相對body的位置
解決方法:
image.png
如圖,我們需要的值 = 觸摸點獲取到的x - canvas相對body的左邊距
var start_x,start_y,move_x,move_y,end_x,end_y;
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var t=document.getElementById('myCanvas').offsetTop;//canvas上邊距
var l=document.getElementById('myCanvas').offsetLeft;//canvas做邊距
//按下
document.getElementById("myCanvas").addEventListener("touchstart",function(e){
start_x=e.touches[0].pageX-l;
start_y=e.touches[0].pageY-t;
//顯示坐標(biāo)
document.getElementById('position').innerText=(`${start_x},${start_y}`);
});
//移動
document.getElementById("myCanvas").addEventListener("touchmove",function(e){
move_x=e.touches[0].pageX-l;
move_y=e.touches[0].pageY-t;
//顯示坐標(biāo)
document.getElementById('position').innerText=(`${move_x},${move_y}`);
});
//松開
document.getElementById("myCanvas").addEventListener("touchend",function(e){
end_x=e.changedTouches[0].pageX-l;
end_y=e.changedTouches[0].pageY-t;
//顯示坐標(biāo)
document.getElementById('position').innerText=(`${end_x},${end_y}`);
});
接下來
按下時開始繪畫,標(biāo)記畫筆起始點
document.getElementById("myCanvas").addEventListener("touchstart",function(e){
start_x=e.touches[0].pageX-l;
start_y=e.touches[0].pageY-t;
//開始本次繪畫
ctx.beginPath();
//畫筆起始點
ctx.moveTo(start_x, start_y);
//顯示坐標(biāo)
document.getElementById('position').innerText=(`${start_x},${start_y}`);
});
移動過程中根據(jù)鼠標(biāo)路徑繪畫并渲染出來
document.getElementById("myCanvas").addEventListener("touchmove",function(e){
move_x=e.touches[0].pageX-l;
move_y=e.touches[0].pageY-t;
//根據(jù)鼠標(biāo)路徑繪畫
ctx.lineTo(move_x, move_y);
//立即渲染
ctx.stroke();
//顯示坐標(biāo)
document.getElementById('position').innerText=(`${move_x},${move_y}`);
});
松開時,創(chuàng)建從當(dāng)前點到開始點的路徑
document.getElementById("myCanvas").addEventListener("touchend",function(e){
end_x=e.changedTouches[0].pageX-l;
end_y=e.changedTouches[0].pageY-t;
//創(chuàng)建從當(dāng)前點到開始點的路徑
ctx.closePath();
//顯示坐標(biāo)
document.getElementById('position').innerText=(`${end_x},${end_y}`);
});
清空當(dāng)前畫布
清空當(dāng)前畫布clearRect(0,0,0,0)
前兩個值代表起始點x,y
后兩個代表終止點x,y
document.getElementById('clearCanvas').onclick=function(){
// 清空畫布
ctx.clearRect(0,0,300,200);
}
生成圖片canvas.toDataURL("image/png")
document.getElementById('success').onclick=function(){
// canvas生成圖片base64編碼
console.log(canvas.toDataURL("image/png"))
//將生成的圖片賦給img元素
document.getElementById('canvasImg').src=canvas.toDataURL("image/png")
}
