兼容移动与PC的画画板

使用canvas建立画布进行绘画功能，兼容移动端与各大浏览器

1、主要测试显示效果如图所示

     

2、HTML界面框架进行设置

	<div id="impressionBoard">
	    <div class="top" id="header">
	       <ul class="topList">
	          <li id="back" onclick="api.closeWin();"></li>
	          <li></li>
	          <li></li>
	          <li id="clear"></li>
	          <li id="download"></li>
	       </ul>
	    </div>
        <div class="onlineCanvas">
            <canvas id="xxx"></canvas>
        </div>
	    <div class="bottom">
	       <ul class="bottomList">
	          <li id="pen" class="active"></li>
	          <li id="eraser"></li>
	          <li id="line"></li>
	          <li id="color"><a id="bgColour"></a></li>
	       </ul>
	    </div>
	</div>
	<div id="canvasBoxBg" class="dpn">
		<div id="canvasBox" class="" >
		   <div id="artboardColor" class="dpn">
		       <p class="artboardTitle">
			     <a class="ml-name cn-name" >画板颜色</a>
			     <a class="ml-name en-name" >Artboard Color</a>
			     <a class="ml-name tn-name" >畫板顏色</a>
	          </p>
		      <ul class="artboardBox">
		         <li id="black" class="black"></li>
		         <li id="color1" class="color1"></li>
		         <li id="color2" class="color2"></li>
		         <li id="color3" class="color3"></li>
		         <li id="color4" class="color4"></li>
		         <li id="color5" class="color5"></li>
		         <li id="color6" class="color6"></li>
		         <li id="color7" class="color7"></li>
		         <li id="color8" class="color8"></li>
		         <li id="color9" class="color9"></li>
		         <li id="color10" class="color10"></li>
		         <li id="color11" class="color11"></li>
		         <li id="color12" class="color12"></li>
		         <li id="color13" class="color13"></li>
		         <li id="color14" class="color14"></li>
		         <li id="color15" class="color15"></li>
		         <li id="color16" class="color16"></li>
		         <li id="color17" class="color17"></li>
		         <li id="color18" class="color18"></li>
		         <li id="color19" class="color19"></li>
		         <li id="color20" class="color20"></li>
		      </ul>
		   </div>
		   <div id="selectionLine" class="dpn">
		      <p class="artboardTitle">
			     <a class="ml-name cn-name" >画笔线条选择</a>
			     <a class="ml-name en-name" >Brush line selection</a>
			     <a class="ml-name tn-name" >畫筆線條選擇</a>
	          </p>	   
	          <div id="lineDiv" class="lineDiv">
	             <div id="minDiv" class="minDiv">
	                <div id="vals" class="vals">1</div>
	             </div>
	          </div>
	          <div class="btn">
	             <span id="cancelLine" class="cancel">
			        <a class="ml-name cn-name" >取消</a>
			        <a class="ml-name en-name" >Cancel</a>
			        <a class="ml-name tn-name" >取消</a>
	             </span>
	             <span id="determineLine" class="determine">
			        <a class="ml-name cn-name" >确认</a>
			        <a class="ml-name en-name" >Confirm</a>
			        <a class="ml-name tn-name" >確認</a>
	             </span>
	          </div>
		   </div>
		</div>
	</div>	

3、js引入

var yyy = document.getElementById('xxx');
var context = yyy.getContext('2d');


var lineWidth = 2;

autoSetCanvasSize(yyy);

listenToUser(yyy);

var eraserEnabled = false;
pen.onclick = function(){
  eraserEnabled = false;
  pen.classList.add('active');
  eraser.classList.remove('active');
}

color.onclick = function(){
   eraserEnabled = false;
   pen.classList.add('active');
   eraser.classList.remove('active');
   canvasBoxBg.classList.remove('dpn');//打开画板
   artboardColor.classList.remove('dpn');//打开画板颜色图层
   selectionLine.classList.add('dpn');//关闭画板颜色图层
}

eraser.onclick = function(){
  eraserEnabled = true;
  eraser.classList.add('active');
  pen.classList.remove('active');
}

line.onclick = function(){
  eraserEnabled = false;
  pen.classList.add('active');
  eraser.classList.remove('active');
  selectionLine.classList.remove('dpn');//打开画板颜色图层  
  canvasBoxBg.classList.remove('dpn');//打开画板
  artboardColor.classList.add('dpn');//关闭画板颜色图层
  var lineDiv = document.getElementById("lineDiv");
  var minDiv = document.getElementById("minDiv");
  document.getElementById("vals").innerText=lineWidth;
  minDiv.style.left =((lineDiv.offsetWidth - 32)/10)*lineWidth+ "px";
}

clear.onclick = function(){
  context.clearRect(0, 0, yyy.width, yyy.height);
}

cancelLine.onclick = function(){
   selectionLine.classList.add('dpn');//打开画板颜色图层    
   canvasBoxBg.classList.add('dpn');//打开画板
}

determineLine.onclick = function(){
   var vals = document.getElementById("vals").innerText; 
   if(vals==0){
      alert(getlang(121));//"畫筆線條不可為0，請重新選擇"
   }else{
      lineWidth = vals;
      selectionLine.classList.add('dpn');//打开画板颜色图层    
      canvasBoxBg.classList.add('dpn');//打开画板
   }
}		

black.onclick = function(){
	context.fillStyle = 'black';
	context.strokeStyle = 'black';
	artboardColor.classList.add('dpn');//关闭画板颜色图层
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#030000";
}
color1.onclick = function(){
	context.fillStyle = '#a5a5a5';
	context.strokeStyle = '#a5a5a5';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#a5a5a5";
}
color2.onclick = function(){
	context.fillStyle = '#596275';
	context.strokeStyle = '#596275';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#596275";
}
color3.onclick = function(){
	context.fillStyle = '#ffffff';
	context.strokeStyle = '#ffffff';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#ffffff";
}
color4.onclick = function(){
	context.fillStyle = '#db5f68';
	context.strokeStyle = '#db5f68';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#db5f68";
}
color5.onclick = function(){
	context.fillStyle = '#c94f57';
	context.strokeStyle = '#c94f57';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#c94f57";
}
color6.onclick = function(){
	context.fillStyle = '#ea765a';
	context.strokeStyle = '#ea765a';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#ea765a";
}
color7.onclick = function(){
	context.fillStyle = '#f7ac69';
	context.strokeStyle = '#f7ac69';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#f7ac69";
}
color8.onclick = function(){
	context.fillStyle = '#f7cf69';
	context.strokeStyle = '#f7cf69';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#f7cf69";
}
color9.onclick = function(){
	context.fillStyle = '#ffcc00';
	context.strokeStyle = '#ffcc00';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#ffcc00";
}
color10.onclick = function(){
	context.fillStyle = '#fffd3a';
	context.strokeStyle = '#fffd3a';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#fffd3a";
}
color11.onclick = function(){
	context.fillStyle = '#a6fc37';
	context.strokeStyle = '#a6fc37';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#a6fc37";
}
color12.onclick = function(){
	context.fillStyle = '#70cc79';
	context.strokeStyle = '#70cc79';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#70cc79";
}
color13.onclick = function(){
	context.fillStyle = '#70cca0';
	context.strokeStyle = '#70cca0';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#70cca0";
}
color14.onclick = function(){
	context.fillStyle = '#37c7fd';
	context.strokeStyle = '#37c7fd';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#37c7fd";
}
color15.onclick = function(){
	context.fillStyle = '#2369f6';
	context.strokeStyle = '#2369f6';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#2369f6";
}
color16.onclick = function(){
	context.fillStyle = '#7338df';
	context.strokeStyle = '#7338df';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#7338df";
}
color17.onclick = function(){
	context.fillStyle = '#fc51f6';
	context.strokeStyle = '#fc51f6';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#fc51f6";
}
color18.onclick = function(){
	context.fillStyle = '#ff41ac';
	context.strokeStyle = '#ff41ac';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#ff41ac";
}
color19.onclick = function(){
	context.fillStyle = '#fb2571';
	context.strokeStyle = '#fb2571';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#fb2571";
}
color20.onclick = function(){
	context.fillStyle = '#ff0012';
	context.strokeStyle = '#ff0012';
	artboardColor.classList.add('dpn');
    canvasBoxBg.classList.add('dpn');
    document.getElementById("bgColour").style.background = "#ff0012";
}

//thin.onclick = function(){
//lineWidth = 5;
//}
//thick.onclick = function(){
//lineWidth = 10;
//}

/******/

function autoSetCanvasSize(canvas) {
  setCanvasSize();

  window.onresize = function() {
    setCanvasSize();
  }

  function setCanvasSize() {
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    console.log(pageWidth);
    console.log(pageHeight);
    canvas.width = pageWidth;
    canvas.height = pageHeight;
//  canvas.height = pageHeight-140;
  }
}

function drawCircle(x, y, radius){
  context.fillStyle="#FFF";
  context.beginPath();
  context.arc(x, y, radius, 0, Math.PI * 2);
  context.fill();
}

function drawLine(x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1); // 起点
  context.lineWidth = lineWidth;
  context.lineTo(x2, y2); // 终点
  context.stroke();
  context.closePath();
}

function listenToUser(canvas) {
  var vals = document.getElementById("vals").innerText; 
  var using = false;
  var lastPoint = { x: undefined,y: undefined}
  // 特性检测
  if(document.body.ontouchstart !== undefined){
    // 触屏设备 苏菲就是个触屏设备啊哥
    canvas.ontouchstart = function(aaa){
      var x = aaa.touches[0].clientX;
      var y = aaa.touches[0].clientY;
      console.log(x,y);
      using = true;
      if (eraserEnabled) {
        drawCircle(x, y,12);
//      context.clearRect(x-5, y-5, xClear, yClear);
      } else {
        lastPoint = {"x": x,"y": y}
      }
    }
    canvas.ontouchmove = function(aaa){
      console.log('边摸边动');
      var x = aaa.touches[0].clientX;
      var y = aaa.touches[0].clientY;

      if (!using) {return}

      if (eraserEnabled) {
         drawCircle(x, y,12);
//      context.clearRect(x-5, y-5, xClear, yClear);
      } else {
        var newPoint = {"x": x,"y": y }
        drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
        lastPoint = newPoint;
      }
    }
    canvas.ontouchend = function(){
      console.log('摸完了');
      using = false;
    }
  }else{
    // 非触屏设备
    canvas.onmousedown = function(aaa) {
      var x = aaa.clientX;
      var y = aaa.clientY;
      using = true;
      if (eraserEnabled) {
          drawCircle(x, y,12);
//      context.clearRect(x-5, y-5, xClear, yClear);
      } else {
        lastPoint = {"x": x,"y": y}
      }
    }
    canvas.onmousemove = function(aaa) {
      var x = aaa.clientX;	
      var y = aaa.clientY;

      if (!using) {return}

      if (eraserEnabled) {
         drawCircle(x, y,12);
//       context.clearRect(x-5, y-5, xClear, yClear);
      } else {
        var newPoint = { "x": x,"y": y}
        drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
        lastPoint = newPoint;
      }

    }
    canvas.onmouseup = function(aaa) {
      using = false;
    }
  }

}

4、样式引入

body,html{margin:0px;padding:0px;width:100%;height:100%;overflow: hidden;}
li{list-style:none;}
#impressionBoard{width:100%;height:100%;z-index:1;}
.top{width:100%;height:60px;background:#ffde01; position: fixed;left: 0; top: 0;z-index:3;}
.bottom{width:100%;height:58px;background:#ffde01;position:fixed;left: 0;bottom:0px;z-index:3;}
#xxx{width:100%;/*height:100%;*/display:block; background:#fff; position: fixed; top:0px;left: 0;bottom:58px;z-index:2;}

.bottomList,.topList{width:100%;}
.bottomList li{float:left;width:25%;height:58px;line-height:58px;text-align:center;background:green;}
.topList li{float:left;width:20%;height:60px;line-height:60px;text-align:center;display: inline-block;}

#back{background:#ffde01 url(../res/canvas/canvasBack.png)50% 50% no-repeat;background-size:11px 20px;}

#pen{background:#ffde01 url(../res/canvas/pen_sele.png) 50% 50% no-repeat;background-size:25px 32px;}
#pen.active{background:#ffde01 url(../res/canvas/pen1.png) 50% 50% no-repeat;background-size:25px 32px;}
#line{background:#ffde01 url(../res/canvas/pensize-sele.png) 50% 50% no-repeat;background-size:28px 28px;}
#line.active{background:#ffde01 url(../res/canvas/pensize-unsele.png) 50% 50% no-repeat;background-size:28px 28px;}
#color{background:#ffde01 url(../res/canvas/Color_sele.png) 50% 50% no-repeat;background-size:33px 26px;}
#color.active{background:#ffde01 url(../res/canvas/Color.png) 50% 50% no-repeat;background-size:33px 26px;}
#eraser{background:#ffde01 url(../res/canvas/Eraser_sele.png) 50% 50% no-repeat;background-size:26px 30px;}
#eraser.active{background:#ffde01 url(../res/canvas/Eraser.png) 50% 50% no-repeat;background-size:26px 30px;}

#clear{background:#ffde01 url(../res/canvas/dele.png) 50% 50% no-repeat;background-size:24px 24px;}
#download{background:#ffde01 url(../res/canvas/Submit.png) 50% 50% no-repeat;background-size:23px 23px;}

#canvasBoxBg{width:100%;height:100%;z-index:9;background:red;}/*position:absolute;background:rgba(0,0,0,0);*/
#canvasBox{width:290px;height:180px;background:#f2f2f2;position:absolute;z-index:10;left: 50%;top: 50%;border-radius:6px;margin-left:-145px;margin-top:-90px;}
#artboardColor{width:270px;height:166px;margin:7px auto;z-index:11;}
.artboardTitle{width:100%;height:36px;line-height:36px;text-align:center;color:#444;}
.artboardBox{width:270px;height:130px;}
.artboardBox li{width:30px;height:30px;float:left;border-radius:50%;margin:6px 4.25px;}
.dpn{display:none;}
.artboardBox> li.black{
  background: #030000;
}
.artboardBox> li.color1{
  background: #a5a5a5;
}
.artboardBox> li.color2{
  background: #596275;
}
.artboardBox> li.color3{
  background: #ffffff;
}
.artboardBox> li.color4{
  background: #db5f68;
}
.artboardBox> li.color5{
  background: #c94f57;
}
.artboardBox> li.color6{
  background: #ea765a;
}
.artboardBox> li.color7{
  background: #f7ac69;
}
.artboardBox> li.color8{
  background: #f7cf69;
}
.artboardBox> li.color9{
  background: #ffcc00;
}
.artboardBox> li.color10{
  background: #fffd3a;
}
.artboardBox> li.color11{
  background: #a6fc37;
}
.artboardBox> li.color12{
  background: #70cc79;
}
.artboardBox> li.color13{
  background: #70cca0;
}
.artboardBox> li.color14{
  background: #37c7fd;
}
.artboardBox> li.color15{
  background: #2369f6;
}
.artboardBox> li.color16{
  background: #7338df;
}
.artboardBox> li.color17{
  background: #fc51f6;
}
.artboardBox> li.color18{
  background: #ff41ac;
}
.artboardBox> li.color19{
  background: #fb2571;
}
.artboardBox> li.color20{
  background: #ff0012;
}

#selectionLine{width:270px;height:166px;margin:7px auto;}
.lineDiv {
    position: relative;
    height: 10px;
    background: #bbb;
    width: 230px;
    margin: 40px auto 10px auto;
    border-radius: 5px;
}
 
.lineDiv .minDiv {
    position: absolute;
    top: -5px;
    left: -4px;
    width: 32px;
    height: 20px;
    background:url(../res/canvas/slidings.png) 0px 50% no-repeat;
    background-size:32px 20px;
    cursor: pointer;
}
 
.lineDiv .minDiv .vals {
    position: absolute;
    font-size: 14px;
    top: -36px;
    left: 0px;
    width: 30px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #ffde01;
    border-radius:6px;
    color:#444;
}
 
.lineDiv .minDiv .vals:after {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 6px solid #ffde01;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    margin-left: 9px;
}

.btn{width:270px;height:42px;position: absolute;bottom:10px;}
.btn span{display:inline-block;width:50%;height:36px;float:left;color:#444;text-align:center;}
.btn span.cancel{background:#ffde01;width:38%;height:36px;line-height:36px;border-radius:10px;margin-left:6%;float:left;}
.btn span.determine{background:#ffde01;width:38%;height:36px;line-height:36px;border-radius:10px;margin-right:6%;float:right;}

5、绘画

	window.onload = function() {
        var lineDiv = document.getElementById('lineDiv'); //长线条
        var minDiv = document.getElementById('minDiv'); //小方块
//              var msg = document.getElementById("msg");
        var vals = document.getElementById("vals");
        var ifBool = false; //判断鼠标是否按下
        
        //事件
        var start = function(e) {
            e.stopPropagation();
            ifBool = true;
            console.log("鼠标按下")
        }
        var move = function(e) {
            console.log("鼠标拖动")
            if(ifBool) {
                if(!e.touches) {    //兼容移动端
                    var x = e.clientX;
                } else {     //兼容PC端
                    var x = e.touches[0].pageX;
                }
                //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
                var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
                var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
                if(minDiv_left >= lineDiv.offsetWidth - 32) {
                    minDiv_left = lineDiv.offsetWidth - 32;
                }
                if(minDiv_left <=0) {
                    minDiv_left = 0;
                }
                //设置拖动后小方块的left值
                minDiv.style.left = minDiv_left + "px";
//                      msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
                vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 32)) * 9+1);
            }
        }
        var end = function(e) {console.log("鼠标弹起");ifBool = false;}
            //鼠标按下方块
        minDiv.addEventListener("touchstart", start);
        minDiv.addEventListener("mousedown", start);
        //拖动
        window.addEventListener("touchmove", move);
        window.addEventListener("mousemove", move);
        //鼠标松开
        window.addEventListener("touchend", end);
        window.addEventListener("mouseup", end);
        //获取元素的绝对位置
        function getPosition(node) {
            var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
            var top = node.offsetTop;
            current = node.offsetParent; // 取得元素的offsetParent
            　 // 一直循环直到根元素
            while(current != null) {　　
                left += current.offsetLeft;　　
                top += current.offsetTop;　　
                current = current.offsetParent;　　
            }
            return {
                "left": left,
                "top": top
            };
        }
    }

’