全局事件 就是什么地方都可以用！！
无论一个页面由多少个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即可实现局域网调试
