html5 canvas手写字代码(兼容手机端)

时间:2022-07-14 18:49:30

html5 canvas手写字代码(兼容手机端)

<pre>
<!DOCTYPE html>
<html>
<head>
<title>画板实验</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
</style>
</head>
<body style="background: #FCBE00" >

<canvas id="myCanvas" ></canvas>

<div>
<button onclick="clean();">清 空</button>
<button onclick="save();">生成图片</button>
</div>

<img id=‘img‘/>

<script type="text/javascript">
var canvas,board,img;
canvas = document.getElementById(‘myCanvas‘);
img= document.getElementById(‘img‘);

canvas.height = 300;
canvas.width = 300;

board = canvas.getContext(‘2d‘);

var mousePress = false;
var last = null;

function beginDraw(){
mousePress = true;
}

function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
board.beginPath();
board.moveTo(last.x,last.y);
board.lineTo(xy.x,xy.y);
board.stroke();
}
last = xy;

}

function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}

function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.offsetX event.target.offsetLeft;
y = event.offsetY event.target.offsetTop;
}
// log(‘x=‘ x ‘ y=‘ y);
return {x:x,y:y};
}

function log(msg){
var log = document.getElementById(‘log‘);
var val = log.value;
log.value = msg ‘n‘ val;
}

function isTouch(event){
var type = event.type;
if(type.indexOf(‘touch‘)>=0){
return true;
}else{
return false;
}
}

function save(){
//base64
var dataUrl = canvas.toDataURL();
img.src = dataUrl;
}


function clean(){
board.clearRect(0,0,canvas.width,canvas.height);

}

board.lineWidth = 1;
board.strokeStyle="#0000ff";


canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener(‘touchstart‘,beginDraw,false);
canvas.addEventListener(‘touchmove‘,drawing,false);
canvas.addEventListener(‘touchend‘,endDraw,false);
</script>


</body>
</html>
</pre>