html5怎么弄动态,HTML5 canvas 动态绘制

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

通过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,endPointX-startPointX,endPointY-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);

});

}

}

标签：function,canvas,savedData,HTML5,var,document,绘制

来源： https://blog.csdn.net/weixin_43974540/article/details/104689920