<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>簽名</title>
<meta charset="utf-8">
<style type="text/css">
#myCanvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id= 'myCanvas' width="300" height="300">
換浏覽器
</canvas>
<div id="image"></div>
<button onclick="handleFinish()">完成</button>
<button onclick="handleClear()">清除</button>
</body>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myImg=document.querySelector('#image');
var lastTime=0;
canvas.ontouchstart = function(e){
var ev = e||window.event;
var x = e.changedTouches[0].clientX - canvas.offsetLeft;
var y = e.changedTouches[0].clientY -canvas.offsetTop;
context.beginPath();
context.strokeStyle = 'red';
context.lineWidth = 10;
context.moveTo(x,y);
canvas.ontouchmove = function(e){
var ev = e||window.event;
var x = e.changedTouches[0].clientX - canvas.offsetLeft;
var y = e.changedTouches[0].clientY -canvas.offsetTop;
context.lineTo(x,y);
context.stroke();
}
canvas.ontouchend = function(){
canvas.ontouchmove = '';
lastTime=new Date().getTime();
}
}
// 擦除文字
function handleClear(){
//第一種方法擦除（clearRect方法）
// context.clearRect(0,0,canvas.width,canvas.height);
//第二種方法擦除（重新設定高寬度）
console.log(canvas);
canvas.width='300';
canvas.height='300';
myImg.querySelector('img').remove();
}
// 完成
function handleFinish(){
convertCanvasToImage(canvas);
}
// canvas轉成圖檔
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
console.log(image.src);
myImg.appendChild(image);
}
</script>
</html>
![Canvas學習筆記00：canvas基礎知識，入門的開始[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)