废话后面说，先上HTML代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>画板</title><link rel="stylesheet" href="style.css" /></head><body><canvas id="canvas"></canvas><script src="main.js"></script></body></html>
这是一个只有一个canvas标签的HTML代码其中有几点需要注意：
1.注意将lang（第二行的）值为zh-CN
2.注意加上第二个meta标签，这个在写移动端的时候起作用
3.link标签引用css代码
4.js的代码要在HTML之后引用，在前面的话获取元素会报错
上css代码
* {margin: 0px;padding: 0px;box-sizing: border-box;}#canvas {display: block;}
注意：
先清除默认样式，然后把盒模型定义为border-boxcanvas的默认display为inline，这里改为blockcanvas 当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。我写宽高是通过js实现的，直接把宽高改为浏览器的窗口的大小
上JS代码
var canvas = document.getElementById("canvas");//将canvas的宽高设置为浏览器可视的宽高canvas.width = document.documentElement.clientWidth;canvas.height = document.documentElement.clientHeight;var ctx = canvas.getContext("2d");//填充的颜色ctx.fillStyle = "black";//边框ctx.strokeStyle = "none";//用来标记的变量，当鼠标按下时为true，松开时为falsevar flag = false;//记录鼠标之前的位置的数组var position = [0, 0];//线的宽度ctx.lineWidth = 5;//连接的方式ctx.lineCap = "round";//通过判断ontouchstart来判断时移动端还是PC端，当时在移动端的时候监听一些时间，当在PC端的时候监听一些事件if ("ontouchstart" in document.documentElement) {//监听手指按下的事件canvas.ontouchstart = function (e) {//记录手按下时的位置position[0] = e.touches[0].clientX;position[1] = e.touches[0].clientY;};canvas.ontouchmove = function (e) {//调用draw函数来画，函数最后面有写draw(position[0], position[1], e.touches[0].clientX, e.touches[0].clientY);position[0] = e.touches[0].clientX;position[1] = e.touches[0].clientY;};} else {//如果不是移动端的话，监听这些属性canvas.onmousedown = function (e) {//当鼠标按下的时候flag为true，然后记录位置flag = true;position[0] = e.clientX;position[1] = e.clientY;};canvas.onmousemove = function (e) {if (flag) {//画线，然后记录位置draw(position[0], position[1], e.clientX, e.clientY);position[0] = e.clientX;position[1] = e.clientY;}};canvas.onmouseup = function () {//鼠标松开后flag为falseflag = false;};}//画线的函数function draw(starX, starY, endX, endY) {ctx.beginPath();ctx.moveTo(starX, starY);ctx.lineTo(endX, endY);ctx.closePath();ctx.stroke();}
以上便是我写的代码，我已将代码上传GitHub，链接：
/1446450047/My-Code-Exercise/tree/master/Drawing-board
我的效果：可以直接画噢，也可以在移动端实现，但是在移动端的话有的浏览器从上往下划的时候的刷新，所以还是有一些bug的
画板1446450047.github.io
如果大家想系统化的再学习canvas的用法可以参考MDN文档：
Canvas的基本用法
