码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 画板

时间:2015-06-27 06:23:31      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<title>画板实验</title>
 <meta charset="UTF-8">
 <meta name="viewport"content="width=device-width, initial-scale=1.0">
<!-- <script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
 <style type="text/css">
</style>
</head>
 <body >
 <canvas id="myCanvas"></canvas>

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

 <img id=‘img‘ alt=‘请涂鸦……‘/>

 <textarea id="log"cols="30"rows="5"></textarea>
 <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();
// dataUrl = dataUrl.replace("image/png","image/octet-stream");
 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>



[
lim_{x to 0} 
]

</body>
</html>

 

canvas 画板

标签:

原文地址:http://www.cnblogs.com/yudishow/p/4603561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!