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