前提是画布是有背景图片的。所以才会设置两张画布，如果你的画布没有背景图片的话，可以设置一张画布.样式可以自己的需求设置
<canvas width="800" height="450" id='canvas'></canvas> <canvas width="800" height="450" id='canvas1'></canvas>
获取画布
var canvas=document.getElementById ('canvas') var c= canvas.getContext('2d'); var canvas1=document.getElementById ('canvas1') var c1= canvas1.getContext('2d');
利用鼠标按下，移动，松开事件进行画图
1 // type 1矩形 2.椭圆 3.直线 4.箭头 5.裁剪 2 function mouseInter(type){ 3 var beginx,beginy,flag; 4 canvas1.onMouseDown=function(e){ 5 beginx=e.layerX 6 beginy=e.layerY 7 flag=true 8 } 9 canvas1.onMouseMove=function(e){ 10 if(flag){ 11 switch(type){ 12 case 1: 13 c1.clearRect(0,0,canvas1.width,canvas1.height) 14 drawRect(beginx,beginy,e,c1) 15 break; 16 case 2: 17 c1.clearRect(0,0,canvas1.width,canvas1.height) 18 let a=(e.layerX-beginx)/2 19 let b=(e.layerY-beginy)/2 20 let centerX=(beginx+e.layerX)/2 21 let centerY=(beginy+e.layerY)/2 22 drawEllipse(c1,centerX,centerY,a,b,e) 23 break; 24 case 3: 25 c1.clearRect(0,0,canvas1.width,canvas1.height) 26 drarLine(beginx,beginy,e,c1) 27 break; 28 case 4: 29 c1.clearRect(0,0,canvas1.width,canvas1.height) 30 drawArrow(beginx,beginy,e,c1) 31 break; 32 case 5: 33 c1.clearRect(0,0,canvas1.width,canvas1.height) 34 drawRect(beginx,beginy,e,c1) 35 break; 36 37 } 38 } 39 } 40 canvas1.onMouseUp=function(e){ 41 flag=false 42 switch(type){ 43 case 1: 44 c1.clearRect(0,0,canvas1.width,canvas1.height) 45 drawRect(beginx,beginy,e,c) 46 break; 47 case 2: 48 c1.clearRect(0,0,canvas1.width,canvas1.height) 49 let a=(e.layerX-beginx)/2 50 let b=(e.layerY-beginy)/2 51 let centerX=(beginx+e.layerX)/2 52 let centerY=(beginy+e.layerY)/2 53 drawEllipse(c,centerX,centerY,a,b,e) 54 break; 55 case 3: 56 c1.clearRect(0,0,canvas1.width,canvas1.height) 57 drarLine(beginx,beginy,e,c) 58 break; 59 case 4: 60 c1.clearRect(0,0,canvas1.width,canvas1.height) 61 drawArrow(beginx,beginy,e,c) 62 break; 63 case 5: 64 c1.clearRect(0,0,canvas1.width,canvas1.height) 65 drawRect(beginx,beginy,e,c) 66 c.clip() 67 break; 68 69 } 70 } 71 } 72 // 矩形 73 function drawRect(beginx,beginy,e,canvas){ 74 canvas.beginPath() 75 var tx=e.layerX-beginx 76 var ty=e.layerY-beginy 77 canvas.rect(beginx,beginy,tx,ty) 78 canvas.strokeStyle='red' 79 canvas.stroke() 80 } 81 // 椭圆 82 function drawEllipse(canvas,x,y,a,b,e){ 83 canvas.save() 84 a=a>0?a:-a 85 b=b>0?b:-b 86 var r=(a>b)?a:b 87 var ratioX=a/r 88 var ratioY=b/r 89 canvas.scale(ratioX,ratioY) 90 canvas.beginPath() 91 canvas.moveTo((x+a)/ratioX,y/ratioY) 92 canvas.arc(x/ratioX,y/ratioY,r,0,2*Math.PI) 93 canvas.closePath() 94 canvas.strokeStyle='red' 95 canvas.stroke() 96 } 97 // 直线 98 function drarLine(beginx,beginy,e,canvas){ 99 canvas.beginPath() 100 canvas.moveTo(beginx,beginy) 101 canvas.lineTo(e.layerX,e.layerY) 102 canvas.strokeStyle='red' 103 canvas.stroke() 104 canvas.closePath() 105 } 106 // 箭头 107 function drawArrow(beginx,beginy,e,canvas){ 108 var theta=45 109 var headlen=10 110 var arrowX,arrowY; 111 // 计算角度和对应的箭头坐标 112 var angle=Math.atan2(beginy-e.layerY,beginx-e.layerX)*180/Math.PI 113 var angle1=(angle+theta)*180/Math.PI 114 var angle2=(angle-theta)*180/Math.PI 115 var topX=handlen*Math.cos(angle1) 116 var topY=handlen*Math.sin(angle1) 117 var botX=handlen*Math.cos(angle2) 118 var botY=handlen*Math.sin(angle2) 119 // 判断是否有移动 120 if(e.layerX===beginy&&e.layerY===beginy){ 121 return 122 }else{ 123 //画线 124 canvas.beginPath() 125 canvas.moveTo(beginx,beginy) 126 canvas.lineTo(e.layerX,e.layerY) 127 arrowX=e.layerX+topX 128 arrowY=e.layerY+topY 129 // 画箭头 130 canvas.moveTo(arrowX,arrowY) 131 canvas.lineTo(e.layerX,e.layerY) 132 arrowX=e.layerX+botX 133 arrowY=e.layerY+topY; 134 // 画线 135 canvas.lineTo(arrowX,arrowY) 136 canvas.strokeStyle='red' 137 canvas.stroke() 138 139 140 } 141 }
绘制文字是单独写的