介绍
别着急咱们先来试试怎么在Canvas上画个跟着鼠标跑的线！Canvas画布挺简单的，不管你以前是否有学过，都能试一试这个练习，学着画点东西出来。这样就能够为接下来更深入地了解Canvas做准备。
背景
这个Canvas画图技术真是新鲜又好玩！很难不让人心血来潮想要试一试。所以，2018年的时候，我们决定挑战下自我，学习并熟练运用这项技巧，把它的潜能全都释放出来，做出连CSS3都无法完成的超酷炫动效！
初衷
Canvas你会不会用？来试试这个简单易懂的练习。只要动动鼠标就可以画线，比学那个头疼的”钟表”效率高多了。这个小练习就像一个指南针，教你学会Canvas的基础操作和如何处理事件，这样以后就不怕搞不定。
准备工作
canvas学习
咱们先搞定Canvas画布，只要在网页上添加了对应的HTML代码就好。这次我们做个宽800高400的画布。记住，虽然具体单位没有提，但大家习惯上都按px（像素）算！
兼容性判断
(function() {
let theCanvas = document.querySelector('#theCanvas')
if (!theCanvas || !theCanvas.getContext) {
//不兼容canvas
return false
} else {
//代码主体
}
})()
写JavaScript，别忘记做好适应性检测保证不管在哪儿什么浏览器或设备上，咱们的代码都能好好运行。就那么回事，写个Canvas功能自查的小小程序，搞定之后安心去敲实用代码！
let context = theCanvas.getContext('2d')
获取2D对象
要画Canvas，我们要用到2D上下文。比如，你只要给Canvas元素的getContext方法加个“2d”，就可以得到那个context了。
获取鼠标坐标
咱们平时用到的鼠标操作其实是基于电脑屏幕上那个长方形的“窗”，鼠标指哪就在哪个框内。跟在画板上涂鸦不同，要先计算出真实鼠标在哪儿再画。不过不用担心，有个专门的函数能帮你解决这事儿，使得使用更简便！
添加鼠标事件
const windowToCanvas = (canvas, x, y) => {
//获取canvas元素距离窗口的一些属性，MDN上有解释
let rect = canvas.getBoundingClientRect()
//x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
return {
x: x - rect.left * (canvas.width/rect.width),
y: y - rect.top * (canvas.height/rect.height)
}
}
让我来教你们怎么在Canvas上加上鼠标。首先，用onmousedown事件记住第一次点在哪儿；然后，再利用onmousemove事件记下每次拖动的地方。为了让你轻松画出路径，onmousedown函数里面别忘了加入onmousemove事件侦听器，这样只要按着鼠标，线条就会自动出现！
结束绘制路径
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
}
你需要一个叫做isAllowDrawLine的开关量来决定能否画线。只要你点击了鼠标以后，在onmouseup事件里面把这个变量变成false就可以！
源码结构
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
//鼠标移动事件
theCanvas.onmousemove = (e) => {
//移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
let { x, y } = ele
context.lineTo(x, y)
context.stroke()
}
}
首先，这个完整的例子里头有三个文件：index.html，main.js还有utils.js。但是要注意的是，咱们在utils.js中用了ES6新潮的语法，看看你们那能用不，否则就要想办法解决。
评论0