http://www.Sina.com/http://www.Sina.com /
项目中包含绘制矩形，圆，直线和点，撤销上一步和清空画布功能。
varhistory=[]functionpoint(x，y， type ) this.x=x this.y=y this.type=type//左键1 )3) functionwindowtocanvant my canvas (//返回元素的大小和位置var rect=my rect宽度加上canvas的border会影响精度returnnewpoint(e.clientx ) (mycanvas.width/rect.width )、e.clienty-rect.top* functioon history () ctx.putimagedata ) history [ history.length-1 ] (' data '，0，0 ) }functionaddhistoy () history
//绘制矩形drawerrect(CTX，left，top，w，h ) { ctx.strokeStyle='#f00000'//画笔颜色ctx.lineWidth='2' //h(CTX.stroke ) ctx.restore ) return ) data:[left，top，w，h] )、绘制/圆的Drawercircle ) CTX、 x r ) { ctx.strokeStyle='#f00000'//画笔颜色ctx.lineWidth='2' //画笔粗细CTX.beginpath(/开始路径ctx.arc(x ) x，x 0起始角，绘制方向顺时针CTX.stroke(CTX.restore ) return ) data:[x，y，r] )，//直线Drawerline ) CTX，x，y，z， n ) { ctx.save () CTX.fillstyle=' # f 00000 ' CTX.line width='2' /画笔粗细ctx.strokeStyle='#f00000'//画笔颜色n ) ctx.stroke ) ctx.restore ) return ) data: ) x，y，z，n ) }， /绘图点Drawerpoint ) CTA y ) { ctx.save () CTX.fillstyle=' # f 00000 ' CTX.stroke style=' # f 0000 ' /笔刷颜色CTX.begin f00000 ) ) /画笔颜色true ) CTX.closepath(CTX.fill ) ctx.restore ) this.posarray.push({data:[x，y ] ) }，3愚人节3533333333333350
///根据绘制方法和事件以及当前选择的工具，使用不同的方法绘制图形的drawer ((var my canvas=document.getelementbyid (my canvas ) ) var CTX=my canvas ) let that=this if (this.rename info.tool=='1' ) (my canvas.onclick=null my canvas.onmousedown=function (e ) )
that.tempPos = [] e.preventDefault() var mousedown = windowToCanvas(e, mycanvas) mycanvas.onmousemove = function (e) { e.preventDefault() showLastHistory(ctx, history) // 每次绘制先清除上一次 let point = windowToCanvas(e, mycanvas) let w = Math.abs(point.x - mousedown.x) let h = Math.abs(point.y - mousedown.y) let left = point.x > mousedown.x ? mousedown.x : point.x let top = point.y > mousedown.y ? mousedown.y : point.y let pos = that.drawerRect(ctx, left, top, w, h) that.tempPos.push(pos) } mycanvas.onmouseup = function (e) { e.preventDefault() addHistoy(history, ctx, mycanvas) // 保存上一次数据 mycanvas.onmousemove = null that.posArray.push(that.tempPos[that.tempPos.length - 1]) } } addHistoy(history, ctx, mycanvas) // 添加一张默认的数据 } else if (this.renameInfo.tool === '2') { // 清除事件 mycanvas.onmousedown = null mycanvas.onmousemove = null mycanvas.onmouseup = null mycanvas.onclick = null mycanvas.onmousedown = function (e) { that.tempPos = [] e.preventDefault() var mousedown = windowToCanvas(e, mycanvas) mycanvas.onmousemove = function (e) { e.preventDefault() showLastHistory(ctx, history) // 每次绘制先清除上一次 let point = windowToCanvas(e, mycanvas) var rx = (point.x - mousedown.x) / 2 var ry = (point.y - mousedown.y) / 2 var r = Math.sqrt(rx * rx + ry * ry) let pos = that.drawerCircle(ctx, rx + mousedown.x, ry + mousedown.y, r) that.tempPos.push(pos) } mycanvas.onmouseup = function (e) { e.preventDefault() addHistoy(history, ctx, mycanvas) // 保存上一次数据 mycanvas.onmousemove = null that.posArray.push(that.tempPos[that.tempPos.length - 1]) } } addHistoy(history, ctx, mycanvas) // 添加一张默认的数据 } else if (this.renameInfo.tool === '3') { mycanvas.onmousedown = null mycanvas.onmousemove = null mycanvas.onmouseup = null mycanvas.onclick = null mycanvas.onmousedown = function (e) { that.tempPos = [] e.preventDefault() var mousedown = windowToCanvas(e, mycanvas) mycanvas.onmousemove = function (e) { e.preventDefault() showLastHistory(ctx, history) // 每次绘制先清除上一次 let point = windowToCanvas(e, mycanvas) let pos = that.drawerLine(ctx, mousedown.x, mousedown.y, point.x, point.y) that.tempPos.push(pos) console.log(that.tempPos) } mycanvas.onmouseup = function (e) { e.preventDefault() addHistoy(history, ctx, mycanvas) // 保存上一次数据 mycanvas.onmousemove = null that.posArray.push(that.tempPos[that.tempPos.length - 1]) } } addHistoy(history, ctx, mycanvas) // 添加一张默认的数据 } else if (this.renameInfo.tool === '4') { } else if (this.renameInfo.tool === '5') { mycanvas.onmousedown = null mycanvas.onmousemove = null mycanvas.onmouseup = null mycanvas.onclick = function (event) { var rect = mycanvas.getBoundingClientRect() var CanvasPos = { x: event.clientX - rect.left * (mycanvas.width / rect.width), y: event.clientY - rect.top * (mycanvas.height / rect.height) } that.drawerPoint(ctx, CanvasPos.x, CanvasPos.y) } } },4.重置画布和撤销上一步
// 重置resetMap () { // 标注的信息都放在这个数组中 this.posArray = [] history = [history[0]] var mycanvas = document.getElementById('mycanvas') var ctx = mycanvas.getContext('2d') ctx.clearRect(0, 0, mycanvas.width, mycanvas.height) addHistoy(history, ctx, mycanvas)},// 取消上一步操作cancel () { if (history.length > 1) { console.log(history) this.posArray.pop() history.pop() var mycanvas = document.getElementById('mycanvas') var ctx = mycanvas.getContext('2d') showLastHistory(ctx, history) }}, 以上便是全部代码，可根据自己的需求进行调整。