前端系统课程 - 18. Canvas 画板 (1)

鼠标事件句柄

  • 鼠标按下 onmousedown

  • 鼠标移动 onmousemove

  • 鼠标松开 onmouseup

鼠标事件信息

  • screenX/Y 属性代表鼠标在整个屏幕的位置；

  • clientX/Y 属性代表鼠标相对于视口在窗口或文档的位置；

  • 事件对象中的 button 属性代表鼠标上的键位，一般值为 0 表示左键，1 表示中键，2 表示右键。

canvas 标签

由于使用普通元素无法在短的时间内连贯的监听鼠标位置，导致“点”的连接不连贯，所以用普通元素做画板很不理想。

  • <canvas> 标签和 <img> 标签类似，默认是 inline-block 元素，并自带宽和高属性；

  • 如果用 CSS 设置 Canvas 元素的宽高可能会导致图像扭曲，所以要用它自带的宽高属性设置；

  • 使用 Canvas 之前需要先设置上下文，例如：var ctx = canvasElem.getContext('2d') ，将上下文设为平面；

  • 通过 fillStyle 属性设置填充颜色，通过 strokeStyle 属性设置描边颜色，设置颜色要在填充或绘制动作之前；

  • 使用 fillRect() 方法可填充出一个矩形，4 个参数分别为（矩形左上角距画布左上角）：X 轴距离，Y 轴距离，宽度，高度；

  • 通过 strokeStyle 属性设置描边颜色；

  • 使用 strokeRect() 方法可绘制出一个矩形，参数同上；

  • 使用 clearRect() 方法将一个矩形区域的内容清除，利用这个方法可以做橡皮擦功能，参数同上；

  • 利用 globalCompositeOperation 属性可以更方便的作出橡皮擦效果，这个属性的默认值是 source-over 意思是在画布已有像素上绘图时会将新像素叠加，而另一个值 destination-out 的作用是在已有像素基础上绘图时，绘制区域的已有像素会被重置为透明，类似刮刮卡效果；利用这个属性还可以设置画布颜色，更多属性可以探索；

  • 使用 arc() 方法可以绘制出一个圆形，6 个参数分别为（圆心距画布左上角）：X 轴距离，Y 轴距离，半径，开始弧度，结束弧度（弧度以 π 为 180°），是否为逆时针；

  • 除了矩形，生成其他图形都要以 beginPath() 开始，以 closePath() 结束；

  • 使用 lineWidth 属性可以设置线的粗细；

  • 设置 lineCap = 'round' 可以使线条两端为圆弧；设置 lineJion = 'round' 可以使线条转折为圆弧；

  • 连续画线的关键在于，起始点位置与结束点位置的交替（beginPoint = newPoint）；

  • 要让画布全屏，可以将画布宽高分别设置为视口宽高，一般使用 document.documentElement.clientWidth/clientHeight 属性的值，并在窗口改变大小时触发；

  • 使用 save() 方法可以保存当前的画布信息，例如缩放设置，颜色设置等，并不是保存文件；

  • 使用 restore() 方法可以还原上一次用 save() 方法保存的画布信息；

  • 使用 clip() 方法可以将选中区域设置为剪辑区域，所有绘画动作都只能在这个剪辑区域操作；

  • 利用 save()、clip() 以及 restore() 方法结合可以制作不同形状橡皮擦效果或刮刮卡效果，例如：

    1
    2
    3
    4
    5
    6
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.clip();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.restore(); // 这组代码实现了圆形橡皮擦的功能

  • 如果要将 Canvas 画好的图保存为图片，可以使用 canvas.toDataURL() 方法，它会将画布中的图案转变为 base64 编码格式的 PNG 图像并将其 Data URL 返回；方法中可以传入需要保存的文件类型的 MINE 类型参数，一般使用 表示 PNG 格式的 image/png 参数即可。另外，最新的浏览器一般都禁止了在新窗口打开 Data URL，所以需要将 Data URL 保存到一个 <a> 标签的 href 属性中，并给这个标签添加 download 属性设置保存的文件名，最后，触发 <a> 标签的 click() 方法即可打开并保存图片文件。新版火狐中，还需要将这个 <a> 标签添加到页面中才能触发点击事件。