js手写组件,支持触屏和鼠标;

kissmett

浏览: 40089 次
性别:
来自: 北京

最近访客更多访客>>

jiangningqu70

吕子乔

ysl_228

yaoper

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Sign </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript">
  <!--
	window.onload = function() {
    new lineCanvas({
        el: document.getElementById("canvas"),//绘制canvas的父级div
        clearEl: document.getElementById("clearCanvas"),//清除按钮
        saveEl: document.getElementById("saveCanvas"),//保存按钮
        //      linewidth:1,//线条粗细，选填
        //      color:"black",//线条颜色，选填
        //      background:"#ffffff"//线条背景，选填
    });
};
function lineCanvas(obj) {
    this.linewidth = 1;
    this.color = "#000000";
    this.background = "#ffffff";
    for (var i in obj) {
        this[i] = obj[i];
    };
    this.canvas = document.createElement("canvas");
    this.el.appendChild(this.canvas);
    this.cxt = this.canvas.getContext("2d");
    this.canvas.width = this.el.clientWidth;
    this.canvas.height = this.el.clientHeight;
    this.cxt.fillStyle = this.background;
    this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
    this.cxt.strokeStyle = this.color;
    this.cxt.lineWidth = this.linewidth;
    this.cxt.lineCap = "round";

	this.mouseCanDraw = false;
	this.canvasOffsetX = this.el.offsetLeft;
	this.canvasOffsetY = this.el.offsetTop;

    //开始绘制
    this.canvas.addEventListener("touchstart", function(e) {
        this.cxt.beginPath();
        x = e.changedTouches[0].pageX - this.canvasOffsetX;
        y = e.changedTouches[0].pageY - this.canvasOffsetY;  
        this.cxt.moveTo(x,y );
    }.bind(this), false);
	this.canvas.addEventListener("mousedown", function(e) {
        this.cxt.beginPath();
        x = e.clientX - this.canvasOffsetX;
        y = e.clientY - this.canvasOffsetY;
        this.cxt.moveTo(x,y);
		this.mouseCanDraw = true;
    }.bind(this), false);

    //绘制中
    this.canvas.addEventListener("touchmove", function(e) {
        x = e.changedTouches[0].pageX - this.canvasOffsetX;
        y = e.changedTouches[0].pageY - this.canvasOffsetY;        
        this.cxt.lineTo(x,y);
        this.cxt.stroke();
    }.bind(this), false);
    this.canvas.addEventListener("mousemove", function(e) {
		if(this.mouseCanDraw){
			x = e.clientX - this.canvasOffsetX;
			y = e.clientY - this.canvasOffsetY;
			this.cxt.lineTo(x,y);
			this.cxt.stroke();
		}
    }.bind(this), false);
    //结束绘制
    this.canvas.addEventListener("touchend", function() {
        this.cxt.closePath();
    }.bind(this), false);
    this.canvas.addEventListener("mouseup", function() {
		this.mouseCanDraw = false;
        this.cxt.closePath();
    }.bind(this), false);
    //清除画布
    this.clearEl.addEventListener("click", function() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }.bind(this), false);
    //保存图片，直接转base64
    this.saveEl.addEventListener("click", function() {
        var imgBase64 = this.canvas.toDataURL();
        console.log(imgBase64);
		document.getElementById("img").src=imgBase64;

    }.bind(this), false);
};

  //-->
  </script>
  
 </head>

 <body>
<br>
  <div id="canvas" style="height:200px;width:400px;border:solid;border-width:1px;" ></div>
  <button id="clearCanvas" >clear</button>
  <button id="saveCanvas" >save</button>

 <br>
  <img id="img" src="" style="height:200px;width:400px;border:solid;border-width:1px;" />
 </body>
</html>

分享到：