HTML5 canvas 动态绘制

HTML5 <canvas> 标签用于绘制图像，但<canvas> 元素本身并没有绘制能力，需使用脚本来完成实际的绘图任务。

<canvas id="myCanvas" width="500" height="500" style="background: aliceblue;left:200px;top:200px;position: absolute;"></canvas>

通过getContext()获取对象进行绘制

var canvas=document.getElementById("myCanvas");
 var canvasDraw=canvas.getContext("2d");

定义所需要的参数，如

var startPointX=0;//起始点 x
var startPointY=0;//起始点 y
var endPointX=0;
var endPointY=0;
var endData;//绘制结束时的数据
var savedData=[];//保存的数据

通过对canvas绑定鼠标事件，从而进行动态的绘制，当鼠标抬起时，将当前绘制的信息赋值给endData（用于保存）。通过不断的删除与绘制（clearAndDraw();），从未达到动态绘制的效果。

function movexy() {

  canvas.onmousedown = function (e) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        startPointX=x-canvas.offsetLeft;
        startPointY=y-canvas.offsetTop;
       

       canvas.onmousemove = function (evt) { 

          var e = event || window.event;
          var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
          var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
          var endPointX1 = e.pageX || e.clientX + scrollX;
          var endPointY1 = e.pageY || e.clientY + scrollY;
          endPointX1-=canvas.offsetLeft;
          endPointY1-=canvas.offsetTop;
          canvasDraw.fillStyle="#FF0000";
          clearAndDraw();
          canvasDraw.fillRect(startPointX,startPointY,endPointX1-startPointX,endPointY1-startPointY);
     
          endPointX=endPointX1;
          endPointY=endPointY1;

        }
        //停止按下与拖动事件
        canvas.onmouseup = function () {
          canvas.onmousemove = null;
          canvas.onmouseup = null;
            endData={"type":"fillRect","x":startPointX,"y":startPointY,"with":endPointX-startPointX,"heigh":endPointY-startPointY};
            
        }
    }
}

若需要对绘制的内容进行保存，可通过savaData存储绘制信息(x,y,with,heigh)，从未达到保存的效果。

function save(){
  if(endData!=undefined&&endData!=""){
     savedData.push(endData);
  }
}

若要对绘制的内容进行撤销，只需将保存的savedData的最后一个元素pop、同时删除canvas中的所有绘制，并绘制当前savedData中的数据，已达到撤销的效果。

//撤销
function revoke(){
  savedData.pop();//
  clearAndDraw();
  
}

function clearAndDraw(){
  canvasDraw.clearRect(0,0, canvas.width,canvas.height);//清除整个画布
  
  if(savedData.length>0){
    savedData.forEach(n=>{
    canvasDraw.fillRect(n.x,n.y,n.with,n.heigh);
  });
  }
}