canvas画布之根据鼠标进行绘制矩形，椭圆，直线，箭头，文字

前提是画布是有背景图片的。所以才会设置两张画布，如果你的画布没有背景图片的话，可以设置一张画布.样式可以自己的需求设置

<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 }

绘制文字是单独写的

 

posted @ 2020-06-06 00:41  Ms-Hibiscus  阅读(1571)  评论(0)  编辑  收藏  举报