全局事件 就是什么地方都可以用！！

无论一个页面由多少个js文件，他们共同汇聚成了一个全局环境

fillRect(x,y,width,height);

绘制一个填充的矩形

strokeRect(x,y,width,height)

绘制一个矩形的边框

鼠标事件

onmousedown
onmousemove
onmouseup

画圆

var canvas = document.getElementById('xxx')
var context = yyy.getContext('2d')

function drawCircle(x,y,radius){
  context.beginPath() // 开始画了啊
  context.fillStyle = 'back'//填充颜色是黑色
  context.arc(x,y,radius,0,Math.PI*2)//x,y坐标,radius半径,0起始角度，2pi结束角度
context.fill()//填色
}

划线

function drawLine(x1,y1,x2,y2){
  context.beginPath()
  context.strokeStyle = 'black'//描边颜色是黑色
  context.moveTo(x1,y1)//起点
  context.lineWidth = 5//线的宽度
  context.lineTo(x2,y2)//终点
  context.stroke()//描边
  context.closePath()
}

canvas 不能通过css来调整宽高，图形会随着界面等比例缩放所以只能用js来控制

document.documentElement.clientWidth
document.documentElement.clientHeight

千万不要用一个按钮来控制多个事件，一个按钮就对应一个事件就好

移动端

meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">

touch事件与鼠标mouse事件类似，有touchstart，touchmove，touchend

   canvas.ontouchstart = function(){
     console.log('开始摸我了')
   }

   canvas.ontouchmove = function(){
     console.log('边摸边动')
   }

   canvas.ontouchend = function(){
     console.log('摸完了')
   }

xxx.ontouchstart如果不支持的话就会显示undefined
支持且未初始化的话就是null

如何下载canvas图片

  download.onclick = function(){
    var url = yyy.toDataURL("image/png")
    var a = document.createElement('a')
    document.body.appendChild(a)
    a.href = url
    a.download = 'myCanvas'
    a.target = '_blank'
    a.click()
  }

局域网调试

在同一无线网下，手机访问本机IP地址 加上端口
比如说我的IP是192.168.1.105，在手机端输入192.168.1.105：8080即可实现局域网调试