源码：http://corehtml5canvas.com

第一章

• 在设置 canvas 的宽度和高度时，不能使用 px 后缀
• 默认的 canvas 元素的大小是 300 * 150 个屏幕像素

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '38px Arial';
ctx.fillStyle = 'cornflowerblue';
ctx.strokeStyle = 'blue';
ctx.fillText('Hello Canvas', canvas.width/2 -150, canvas.height/2 + 15);
ctx.strokeText('Hello Canvas', canvas.width/2 -150, canvas.height/2 + 15);

• canvas 元素实际上有两套尺寸
• CSS设定宽高：只会改变元素本身的大小
• 设置元素的 width 与 height：同时修改“元素本身的大小”和“元素绘图表面的大小”。当 canvas “元素的大小”不符合”元素绘图表面的大小“时，浏览器会对绘图表面进行缩放，使其符合元素的大小。

context

兼容性

支持 IE9-

• explorecanvas
• Google Chrome Frame

性能

在执行到某几行特定的代码时开始分析，在执行完后就停止分析

console.profile('Core HTML5 Animation, erasing the background');
//. ..
console.profileEnd();

• Profiler
• Timeline
• jsPerf.com

基本绘制制作（时钟）

制作一个时钟案例：

console.log('loaded');
const node = document.getElementById('app');
const canvas = document.createElement('canvas');
canvas.id = 'canvas';
const ctx = canvas.getContext('2d');
ctx.font = '38px Arial';
ctx.fillStyle = 'red';
ctx.strokeStyle = 'red';
console.log("canvas.width:", canvas.width, "canvas.height", canvas.height)
// ctx.fillText('Hello Canvas', canvas.width/2 -150, canvas.height/2 + 15);
// ctx.strokeText('Hello Canvas', canvas.width/2 -150, canvas.height/2 + 15);
const FONT_HEIGHT = 15;
const MARGIN = 35;
const HAND_TRUNCTION = canvas.width / 25;
const HOUR_HAND_TRUNCATION = canvas.width / 10;
const NUMERAL_SPACING = 20;
const RADIUS = canvas.width/2 - MARGIN; // 半径
const HAND_RADIUS = RADIUS + NUMERAL_SPACING
const drawCircle = () => {
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI * 2, true);
  ctx.stroke();
}
const drawNumerals = () => {
  const numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  ctx.font = FONT_HEIGHT + 'px Arial';
  let angle = 0;
  let numeralWidth = 0;
  numerals.forEach((numeral) => {
    angle = Math.PI/6 * (numeral - 3);
    numeralWidth = ctx.measureText(numeral).width;
    ctx.fillText(numeral,
      canvas.width/2 + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,
      canvas.height/2 + Math.sin(angle)*(HAND_RADIUS) - FONT_HEIGHT/3,
    )
  });
}
const drawCenter = () => {
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
  ctx.fill();
}
const drawHand = (loc, isHour) => {
  const angle = (Math.PI*2) * (loc/60) - Math.PI/2;
  const handRadius = isHour ? RADIUS - HAND_TRUNCTION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCTION;
  ctx.moveTo(
    canvas.width/2,
    canvas.height/2
  );
  ctx.lineTo(
    canvas.width/2 + Math.cos(angle)*handRadius,
    canvas.height/2 + Math.sin(angle)*handRadius,
  );
  ctx.stroke()
}
const drawHands = () => {
  const date = new Date;
  let hour = date.getHours();
  hour = hour > 12 ? hour - 12 : hour;
  drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);
  drawHand(date.getMinutes(), false, 0.5);
  drawHand(date.getSeconds(), false, 0.2);
}
const drawClock = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawNumerals();
  drawCircle();
  drawCenter();
  drawHands();
}
drawClock()
const loop = setInterval(drawClock, 1000);
node.append(canvas)

事件

监听事件有两种方式：区别是 addEventListener 可以同时监听多个事件。

canvas.onmousedown = function (e) {
  console.log('mousedown');
}
canvas.addEventListener('mousedown', (e) => console.log('mousedown'));

鼠标事件

• mousemove
• mouseup
• mouseout

键盘事件

canvas 是一个不可获取焦点的元素，即无法监听键盘事件，只能通过document或window对象添加键盘事件监听器。

• keydown
• keypress
• keyup

keycode 参考列表：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode

获取可打印字符，浏览器只会在产生可打印字符时才会触发 keypress 事件：

document.addEventListener('keypress', (e) => {
  const key = String.fromCharCode(e.which);
  console.log('key', key, e.keyCode)
})

触摸事件

转换坐标

浏览器监听的鼠标坐标是窗口坐标(window coordinate), 而非相对于 canvas 的坐标，可以进行相应的转换。

const windowToCanvas = (canvas, x, y) => {
  // 获取canvas的边界框(bounding box)
  const bbox = canvas.getBoundingClientRect();
  console.log('bbox', bbox);
  // 当canvas元素大小与绘图表面大小不相符时，对坐标进行缩放
  return {
    x: x - bbox.left * (canvas.width / bbox.width),
    y: y - bbox.top * (canvas.height / bbox.height)
  };
}
canvas.onmousemove = (e) => {
  const loc = windowToCanvas(canvas, e.clientX, e.clientY);
  console.log('onmousemove', 'loc', loc)
}

canvas: 立即模式(immediate-mode),立刻将指定的内容绘制上去，然后忘记刚才绘制的内容，即canvas不会包含将要绘制的图形对象列表。是直接向屏幕上绘制的。更适合制作“绘画APP”，因为不需要跟踪记录用户所绘制的东西。
SVG: 保留模式(retained-mode):会维护一份所绘图形对象的列表。更适合制作“画图APP”，可以让用户操作其所创建的图形对象。

将HTML定位到Canvas上

    <div id="app">
      <div id="glasspane">
        <h2 class="title">Bouncing Balls</h2>
        <p>One hundred balls bouncing</p>
        <a href="" id="startButton">Start</a>
      </div>
    </div>

const node = document.getElementById('app');
const canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.height = 320;
node.append(canvas)

body {
        background: #ddd;
      }
      #canvas {
        margin-left: 10px;
        margin-top: 10px;
        background: #fff;
        border: thin solid #aaa;
      }
      #glasspane {
        position: absolute;
        left: 50px;
        top: 50px;
        padding: 0 20px 10px 10px;
        background: rgba(0, 0, 0, 0.3);
        border: thin solid rgba(0, 0, 0, 0.6);
        color: #eee;
        font-family: sans-serif;
        font-style: 12px;
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
      }
      #glasspane h2 {
        font-weight: normal;
      }
      #glasspane .title {
        font-size: 2em;
        color: rgba(255, 255, 0, 0.8);
      }
      #glasspane a:hover {
        color: yellow;
      }
      #glasspane a {
        text-decoration: none;
        color: #ccc;
        font-style: 3.5em;
      }
      #glasspane p {
        margin: 10px;
        color: rgba(65, 65, 220, 1.0);
        font-style: 12pt;
        font-family: sans-serif;
      }

橡皮筋式选取框(Rubberbanding)

起初，canvas显示一张图片，当选定图像的某一部分时，应用程序会将你选取的部分放大。

    <div id="app">
      <div id="controls">
        <input type="button" id='resetButton' value="Reset">
      </div>
      <div id="rubberbandDiv"></div>
    </div>

// 橡皮筋式选取框 start
const rubberbandDiv = document.getElementById('rubberbandDiv');
const resetBtn = document.getElementById('resetButton')
const image = new Image()
const mousedown = {}
let rubberbandRectangle = {}
let dragging = false
const moveRubberbandDiv = () => {
  console.log('moveRubberbandDiv')
  rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
  rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}
const resizeRubberbandDiv = () => {
  console.log('resizeRubberbandDivs')
  rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
  rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}
const showRubberbandDiv = () => {
  console.log('showRubberbandDiv')
  rubberbandDiv.style.display = 'inline';
}
const hideRubberbandDiv = () => {
  console.log('hideRubberbandDiv')
  rubberbandDiv.style.display = 'none';
}
const resetRubberbandRectangle = () => {
  console.log('resetRubberbandRectangle')
  rubberbandRectangle = {
    top : 0,
    left: 0,
    width: 0,
    height: 0
  };
}
// 将 DIV 元素的左上角移动到鼠标按下的地点，并使 DIV 元素可见
const rubberbandStart = (x, y) => {
  console.log('rubberbandStart')
  mousedown.x = x;
  mousedown.y = y;
  rubberbandRectangle.left = mousedown.x;
  rubberbandRectangle.top = mousedown.y;
  moveRubberbandDiv()
  showRubberbandDiv()
  dragging = true;
}
// 会对 DIV 元素进行移动和缩放操作
const rubberbandStretch = (x, y) => {
  console.log('rubberbandStretch')
  rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
  rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;
  rubberbandRectangle.width = Math.abs(x - mousedown.x);
  rubberbandRectangle.height = Math.abs(y - mousedown.y);
  moveRubberbandDiv()
  resizeRubberbandDiv()
}
// 把选中的那部分图像放大，并绘制出来，同时将 DIV 隐藏
const rubberbandEnd = () => {
  console.log('rubberbandEnd')
  const bbox = canvas.getBoundingClientRect();
  try {
    ctx.drawImage(canvas,
      rubberbandRectangle.left - bbox.left,
      rubberbandRectangle.top - bbox.top,
      rubberbandRectangle.width,
      rubberbandRectangle.height,
      0,
      0,
      canvas.width,
      canvas.height
    )
  } catch (e) {
    // suppress error message when mouse is released
    // outside the canvas
  }
  resetRubberbandRectangle()
  rubberbandDiv.style.width = 0;
  rubberbandDiv.style.height = 0;
  hideRubberbandDiv()
  dragging = false;
}
canvas.onmousedown = (e) => {
  // console.log('canvas.onmousemove')
  const x = e.clientX;
  const y = e.clientY;
  e.preventDefault();
  rubberbandStart(x, y);
}
window.onmousemove = (e) => {
  // console.log('window.onmousemove')
  const x = e.clientX;
  const y = e.clientY;
  e.preventDefault()
  if (dragging) {
    rubberbandStretch(x, y);
  }
}
window.onmouseup = (e) => {
  // console.log('window.onmouseup')
  e.preventDefault()
  rubberbandEnd()
}
image.onload = () => {
  console.log('image_onload')
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}
resetBtn.onClick = (e) => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}
image.src = '//img.08087.cc/uploads/20190113/18/1547376816-OosHLDBkeP.jpg'
// 橡皮筋式选取框 End

使用 toDataURL() 将 canvas 的内容打印出来

<div id="controls">
  <input type="button" id="snapshotButton" value="Take snapshots">
</div>
<img src="" alt="" id="snapshotImageElement">

const snapshotBtn = document.getElementById('snapshotButton');
const snapshotImgElm = document.getElementById('snapshotImageElement');
let loop2 = '';
snapshotBtn.onclick = (e) => {
  let dataUrl = '';
  if (snapshotBtn.value === 'Take snapshots') {
    dataUrl = canvas.toDataURL();
    clearInterval(loop2);
    snapshotImgElm.src = dataUrl;
    snapshotImgElm.style.display = 'inline';
    canvas.style.display = 'none';
    snapshotBtn.value = 'Return to Canvas';
  } else {
    canvas.style.display = 'inline';
    snapshotImgElm.style.display = 'none';
    loop2 = setInterval(drawClock, 1000);
    snapshotBtn.value = 'Take snapshots'
  }
}

数学知识

角度转弧度

180 度 = 弧度
注意：JS 中的 Math.sin()、Math.cos()、Math.tan() 采用的是弧度值，而非角度值。

第二章

需求描述：

• 对线条、弧形、圆、曲线及多边形进行描边与填充
• 通过设置绘图环境的属性来改变所绘图形的外观
• 绘制圆角矩形
• 绘制并编辑贝塞尔曲线
• 对 2d 绘制环境进行扩展，使之可以绘制虚线
• 使用纯色、渐变色及图案来对图形进行描边及填充
• 用阴影效果来模拟具有深度的立体图形效果
• 在不影响背景的情况下，使用“剪辑区域”技术来擦除图形与文本
• 实现橡皮筋式辅助线技术，以便让用户可以交互式地绘制图形
• 在 canvas 中拖动图形对象
• 坐标系统的变换

矩形

如果宽度或高度有一个为0的话，那么该方法将会分别绘制一条竖线或横线。
如果均为0，则不会绘制任何东西。 | | 填充 | fillRect(double x, double y, double w, double h) | 使用 fillStyle 属性填充指定的矩形。
如果宽度或高度为0,则不会进行任何绘制 |

const node = document.getElementById('app');
const canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.height = 320;
canvas.width = 600;
const ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
ctx.lineWidth = 30;
ctx.font = '24px Helvetica'
ctx.fillText('Click anywhere to erase', 175, 40);
ctx.strokeStyle = 'goldenrod'
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
ctx.strokeRect(75, 100, 200, 200);
ctx.fillRect(325, 100, 200, 200)

生成线性渐变色：

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
// const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height/2);
const gradient = ctx.createRadialGradient(
  canvas.width/2, canvas.height, 10,
  canvas.width/2, 0, 100
)
gradient.addColorStop(0, 'blue')
gradient.addColorStop(0.25, 'white')
gradient.addColorStop(0.5, 'purple')
gradient.addColorStop(1, 'yellow')
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height)

图案填充

• image 元素
• canvas 元素
• video 元素

<div id="radios">
    <input type="radio" id="repeatRadio" name='patternRadio' checked>repeat
    <input type="radio" id="repeatXRadio" name='patternRadio'>repeatX
    <input type="radio" id="repeatYRadio" name='patternRadio'>repeatY
    <input type="radio" id="noRepeatRadio" name='patternRadio'>noRepeat
</div>

canvas.height = 800
const repeatRadio = document.getElementById('repeatRadio');
const repeatXRadio = document.getElementById('repeatXRadio')
const repeatYRadio = document.getElementById('repeatYRadio')
const noRepeatRadio = document.getElementById('noRepeatRadio')
const image = new Image()
const fillCanvasWithPattern = (repeatString) => {
  const pattern = ctx.createPattern(image, repeatString)
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = pattern
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fill()
}
repeatRadio.onclick = () => {
  fillCanvasWithPattern('repeat')
}
repeatXRadio.onclick = () => {
  fillCanvasWithPattern('repeat-x')
}
repeatYRadio.onclick = () => {
  fillCanvasWithPattern('repeat-y')
}
noRepeatRadio.onclick = () => {
  fillCanvasWithPattern('no-repeat')
}
image.src = '//timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=156878881309' +
    '9&di=47c2254fc9072d61558d5081bb94d45c&imgtype=0&src=http%3A%2F%2Fico.58pic.com%2' +
    'Ficonset01%2Fpretty-office-9-icons%2Fgif%2F319331.gif'
image.width = '10px'
image.height = '10px'
image.onload = (e) => {
  fillCanvasWithPattern('repeat')
}

阴影

shadowColor 不是全透明的，其余属性中，存在一个非0值：

路径

使用rect() 与 arc() 来创建路径，然后调用 stroke() 或 fill() 令其可见。

const node = document.getElementById('app');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.id = 'canvas';
canvas.width = 1200
canvas.height = 1000
// 画笔样式
ctx.font = '48pt Helvetica';
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'red';
ctx.lineWidth = '2'; // 设置线条宽度为 2
// 文本
ctx.strokeText('Stroke', 60, 110);
ctx.fillText('Fill', 440, 110);
ctx.strokeText('Stroke && Fill', 700, 110);
ctx.fillText('Stroke && Fill', 700, 110);
// 矩形
ctx.lineWidth = '5' // 设置线条宽度为 5
ctx.beginPath()
ctx.rect(80, 150, 150, 100)
ctx.stroke()
ctx.beginPath()
ctx.rect(400, 150, 150, 100)
ctx.fill()
ctx.beginPath()
ctx.rect(750, 150, 150, 100)
ctx.stroke()
ctx.fill()
// 开放弧形
ctx.beginPath()
ctx.arc(150, 370, 60, 0, Math.PI*3/2)
ctx.stroke()
ctx.beginPath()
ctx.arc(475, 370, 60, 0, Math.PI*3/2)
ctx.fill()
ctx.beginPath()
ctx.arc(820, 370, 60, 0, Math.PI*3/2)
ctx.stroke()
ctx.fill()
// 封闭弧形
ctx.beginPath()
ctx.arc(150, 550, 60, 0, Math.PI*3/2)
ctx.closePath()
ctx.stroke()
ctx.beginPath()
ctx.arc(475, 550, 60, 0, Math.PI*3/2)
ctx.closePath()
ctx.fill()
ctx.beginPath()
ctx.arc(820, 550, 60, 0, Math.PI*3/2)
ctx.closePath()
ctx.stroke()
ctx.fill()

非零环绕规则

有自我交叉情况的路径：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，使此线段的终点完全落在路径范围之外。
将计数器初始化为 0，然后，每当这条线段与路径上的直线或曲线相交时，就改变计数器的值。如果是与路径的顺时针部分相交，则 +1，如果是与路径的逆时针部分相交，则 -1。若计数器的最终值不是 0，那么此区域就在路径里面，在调用fill()方法时，浏览器就会对其进行填充。如果最终值非0，那么此区域就不在路径内部，浏览器也就不会对其进行填充。

剪纸效果

为什么会有一根横线？
根据 Canvas 规范，当使用 arc() 方法向当前路径中增加子路径时，该方法必须将上一条子路径的终点与所画圆弧的起点相连。可以在调用 arc()前先调用 beginPath()。调用此方法会将当前路径下的所有子路径都清除掉。

const drawTwoArcs = () => {
  ctx.beginPath()
  // Outer: 逆时针
  ctx.arc(
    300, 190,
    150,
    0, Math.PI*2,
    false
  );
  // Inner: 顺时针
  ctx.arc(
    300, 190,
    100,
    0, Math.PI*2,
    true
  );
  ctx.fill()
  ctx.stroke()
}
const draw = () => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  drawTwoArcs()
}
ctx.fillStyle = 'rgba(100, 140, 230, 0.5)'
ctx.strokeStyle = ctx.fillStyle;
draw()

const node = document.getElementById('app');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.id = 'canvas';
canvas.height = 1000;
const rect = (x, y, w, h, direction) => {
  if (direction) {
    // 顺时针
    ctx.moveTo(x, y)
    ctx.lineTo(x, y+h)
    ctx.lineTo(x + w, y + h)
    ctx.lineTo(x + w, y)
  } else {
    // 逆时针
    ctx.moveTo(x, y)
    ctx.lineTo(x+w, y)
    ctx.lineTo(x+w, y+h)
    ctx.lineTo(x, y+h)
  }
  ctx.closePath()
}
const addOuterRectPath = () => {
  ctx.rect(110, 25, 370, 335)
}
const addRectPath = () => {
  rect(310, 55, 70, 35, true)
}
const addCirclePath = () => {
  ctx.arc(300, 300, 40, 0, Math.PI*2, true)
}
const addTrianglePath = () => {
  ctx.moveTo(400, 200);
  ctx.lineTo(250, 115);
  ctx.lineTo(200, 200);
  ctx.closePath()
}
const drawCutouts = () => {
  ctx.beginPath()
  addOuterRectPath()
  addCirclePath()
  addRectPath()
  addTrianglePath()
  ctx.fill()
}
const draw = () => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.shadowColor = 'rgba(200, 200, 0, 0.5)';
  ctx.shadowOffsetX = 12;
  ctx.shadowOffsetY = 12;
  ctx.shadowBlur = 15;
  drawCutouts()
}
ctx.fillStyle = 'goldenrod'
draw()

线段

ctx.lineWidth = 1;
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(450, 50)
ctx.stroke()
ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.moveTo(50.5, 100)
ctx.lineTo(400.5, 100)
ctx.stroke()

网格

// 绘制网络
const drawGrid = (ctx, color, stepx, stepy) => {
  ctx.strokeStyle = color;
  ctx.lineWidth = 0.5;
  for (let i = stepx+0.5; i < ctx.canvas.width; i+=stepx) {
    ctx.beginPath()
    ctx.moveTo(i, 0)
    ctx.lineTo(i, ctx.canvas.width)
    ctx.stroke()
  }
  for (let i = stepy+0.5; i < ctx.canvas.height; i+=stepy) {
    ctx.beginPath()
    ctx.moveTo(0, i)
    ctx.lineTo(ctx.canvas.width, i)
    ctx.stroke()
  }
}
drawGrid(ctx, 'lightgray', 10, 10)

坐标轴

// 绘制坐标轴
const AXIS_MARGIN = 40;
const AXIS_ORIGIN = {
  x: AXIS_MARGIN,
  y: canvas.height - AXIS_MARGIN,
}
const AXIS_TOP = AXIS_MARGIN;
const AXIS_RIGHT = canvas.width - AXIS_MARGIN;
const HORIZONTAL_TICK_SPACING = 10;
const VERTICAL_TICK_SPACING = 10;
const AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x;
const AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP;
const NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING;
const NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING;
const TICK_WIDTH = 10;
const TICKS_LINEWIDTH = 0.5;
const TICKS_COLOR = 'navy';
const AXIS_LINEWIDTH = 1.0;
const AXIS_COLOR = 'blue';
const drawAxes = () => {
  ctx.save();
  ctx.strokeStyle = AXIS_COLOR;
  ctx.lineWidth = AXIS_LINEWIDTH;
  drawHorizontalAxis()
  drawVertialAxis()
  ctx.lineWidth = TICKS_LINEWIDTH
  ctx.strokeStyle = TICKS_COLOR
  drawHorizontalAxisTicks()
  drawVerticalAxisTicks()
  ctx.restore()
}
const drawHorizontalAxis = () => {
  ctx.beginPath()
  ctx.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y)
  ctx.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y)
  ctx.stroke()
}
const drawVertialAxis = () => {
  ctx.beginPath()
  ctx.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y)
  ctx.lineTo(AXIS_ORIGIN.x, AXIS_TOP)
  ctx.stroke()
}
const drawHorizontalAxisTicks = () => {
  let deltaX = '';
  for (let i = 1; i < NUM_HORIZONTAL_TICKS; ++i) {
    ctx.beginPath()
    if (i % 5 === 0) {
      deltaX = TICK_WIDTH;
    } else {
      deltaX = TICK_WIDTH / 2;
    }
    ctx.moveTo(
      AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
      AXIS_ORIGIN.y - deltaX
    );
    ctx.lineTo(
      AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
      AXIS_ORIGIN.y + deltaX
    );
    ctx.stroke()
  }
}
const drawVerticalAxisTicks = () => {
  let deltaY = '';
  for (let i = 1; i < NUM_HORIZONTAL_TICKS; ++i) {
    ctx.beginPath()
    if (i % 5 === 0) {
      deltaY = TICK_WIDTH;
    } else {
      deltaY = TICK_WIDTH / 2;
    }
    ctx.moveTo(
      AXIS_ORIGIN.x - deltaY,
      AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING
    );
    ctx.lineTo(
      AXIS_ORIGIN.x + deltaY,
      AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING
    );
    ctx.stroke()
  }
}
drawAxes()

涂鸦线条绘制

const eraseAllButton = document.getElementById('eraseAllButton');
const strokeStyleSelect = document.getElementById('strokeStyleSelect');
const guidewireCheckbox = document.getElementById('guidewireCheckbox');
let drawingSurfaceImageData = '';
const mousedown = {};
const rubberbandRect = {};
let dragging = false;
let guidewires = guidewireCheckbox.checked;
const saveDrawingSurface = () => {
  drawingSurfaceImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
const restoreDrawingSurface = () => {
  ctx.putImageData(drawingSurfaceImageData, 0, 0);
}
const updateRubberbandRect = (loc) => {
  rubberbandRect.width = Math.abs(loc.x - mousedown.x);
  rubberbandRect.height = Math.abs(loc.y - mousedown.y);
  if (loc.x > mousedown.x) {
    rubberbandRect.left = mousedown.x;
  } else {
    rubberbandRect.left = loc.x;
  }
  if (loc.y > mousedown.y) {
    rubberbandRect.top = mousedown.y;
  } else {
    rubberbandRect.top = loc.y;
  }
}
const drawRubberbandShape = (loc) => {
  ctx.beginPath()
  ctx.moveTo(mousedown.x, mousedown.y)
  ctx.lineTo(loc.x, loc.y)
  ctx.stroke()
}
const updateRubberband = (loc) => {
  updateRubberbandRect(loc);
  drawRubberbandShape(loc);
}
const drawHorizontalLine = (y) => {
  ctx.beginPath()
  ctx.moveTo(0, y + 0.5)
  ctx.lineTo(ctx.canvas.width, y+0.5)
  ctx.stroke()
}
const drawVerticalLine = (x) => {
  ctx.beginPath()
  ctx.moveTo(x+0.5, 0)
  ctx.lineTo(x+0.5, ctx.canvas.height)
  ctx.stroke()
}
const drawGuidewires = (x, y) => {
  ctx.save()
  ctx.strokeStyle = 'rgba(0, 0, 230, 0.4)'
  ctx.lineWidth = 0.5
  drawVerticalLine(x)
  drawHorizontalLine(y)
  ctx.restore()
}
canvas.onmousedown = (e) => {
  let loc = windowToCanvas(canvas, e.clientX, e.clientY);
  e.preventDefault()
  saveDrawingSurface()
  mousedown.x = loc.x;
  mousedown.y = loc.y;
  dragging = true;
}
canvas.onmousemove = (e) => {
  let loc = {};
  if (dragging) {
    e.preventDefault()
    loc = windowToCanvas(canvas, e.clientX, e.clientY);
    restoreDrawingSurface()
    updateRubberband(loc)
    if (guidewires) {
      drawGuidewires(loc.x, loc.y);
    }
  }
}
canvas.onmouseup = (e) => {
  let loc = windowToCanvas(canvas, e.clientX, e.clientY);
  restoreDrawingSurface()
  updateRubberband(loc)
  dragging = false
}
eraseAllButton.onclick = (e) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  saveDrawingSurface()
}
strokeStyleSelect.onchange = (e) => {
  ctx.strokeStyle = strokeStyleSelect.value;
}
guidewireCheckbox.onchange = (e) => {
  guidewires = guidewireCheckbox.checked;
}
ctx.strokeStyle = strokeStyleSelect.value;

虚线

const drawDashedLine = (ctx, x1, y1, x2, y2, dashLength=5) => {
  const deltaX = x2 - x1;
  const deltaY = y2 - y1;
  const numDashes = Math.floor(Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) / dashLength);
  for (let i = 0; i < numDashes; ++i) {
    ctx[i%2 === 0 ? 'moveTo' : 'lineTo'](x1 + (deltaX/numDashes)*i, y1 + (deltaY / numDashes) * i);
  }
  ctx.stroke();
}
ctx.lineWidth = 3;
ctx.strokeStyle = 'blue';
drawDashedLine(
  ctx,
  20,
  20,
  ctx.canvas.width - 20,
  20
);
drawDashedLine(
  ctx,
  ctx.canvas.height - 20,
  ctx.canvas.width - 20,
  ctx.canvas.height - 20,
  10
);
drawDashedLine(
  ctx,
  ctx.canvas.width - 20,
  ctx.canvas.height - 20,
  20,
  ctx.canvas.height - 20,
  15
);
drawDashedLine(
  ctx,
  20,
  ctx.canvas.height - 20,
  20,
  20,
  1
);

扩展 CanvasRenderingContext2D 对象

const moveToFunction = CanvasRenderingContext2D.prototype.moveTo;
CanvasRenderingContext2D.prototype.lastMoveToLocation = {};
CanvasRenderingContext2D.prototype.moveTo = (x, y) => {
  moveToFunction.apply(ctx, [x, y]);
  this.lastMoveToLocation.x = x;
  this.lastMoveToLocation.y = y;
}
CanvasRenderingContext2D.prototype.dashedLineTo = (x, y, dashLength=5) => {
  const startX = this.lastMoveToLocation.x;
  const startY = this.lastMoveToLocation.y;
  const deltaX = x - startX;
  const deltaY = y - startY;
  const numDashes = Math.floor(Math.sqrt(Math.pow(deltaX) + Math.pow(deltaY)) / dashLength);
  for (let i = 0; i < numDashes; ++i) {
    this[i % 2 === 0 ? 'moveTo' : 'lineTo'](startX + (deltaX / numDashes) * i, startY + (deltaY / numDashes) * i);
  }
  this.moveTo(x, y);
}
ctx.lineWidth = 3;
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20)
ctx.dashedLineTo(
  ctx,
  20,
  20,
  ctx.canvas.width - 20,
  20
);
ctx.dashedLineTo(
  ctx,
  ctx.canvas.height - 20,
  ctx.canvas.width - 20,
  ctx.canvas.height - 20,
  10
);
ctx.dashedLineTo(
  ctx,
  ctx.canvas.width - 20,
  ctx.canvas.height - 20,
  20,
  ctx.canvas.height - 20,
  15
);
ctx.dashedLineTo(
  ctx,
  20,
  ctx.canvas.height - 20,
  20,
  20,
  1
);