08 Fun with HTML5 Canvas

效果

效果图

Demo
Github

知识点

• canvas
  • getContext()
  • beginPath()
  • moveTo()
  • lineTo()
  • stroke()
  • strokeStyle
  • lineJoin
  • lineCap
  • lineWidth
• 颜色
  • hsl(H,S,L)
• 鼠标事件
  • mousedown
  • mousemove
  • mouseup
  • mouseout
• 解构赋值

笔记

canvas

canvas 默认大小：300 × 150，直接通过 css 设置大小，只是按比例缩放，只有通过 HTML 或者 JS 来设置 canvas 大小才正常。

// 通过 HTML 设置
<canvas id="draw" width="800" height="800"></canvas>

// 通过 JavaScript 设置
canvas.width = 800;
canvas.height = 800;

分号问题

我个人习惯不在每句结尾写分号，因为这样看起来比较干净，但是下面这种情况，必须要分号来结尾，以防发生歧义。

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true
  [lastX, lastY] = [e.offsetX, e.offsetY]
})

上面使用了结构赋值，如果不在 isDrawing = true 后以分号结尾，程序会这样解读：

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true[lastX, lastY] = [e.offsetX, e.offsetY];
})

而我的解决方法是：在会产生歧义的地方前面加分号，如下：

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true
  ;[lastX, lastY] = [e.offsetX, e.offsetY]
})

参考：
自动分号补全

VSCode自动补全

/** @type {HTMLCanvasElement} */  // 此一行使 VSCode 识别 canvas
const canvas = document.querySelector('#draw')
const ctx = canvas.getContext('2d')

如上：通过 document.getElementById() 和 document.querySelector() 返回的对象是没有自动补全的，像 getContext() 这种 canvas 自带方法就不能正常自动补全，这时通过注释中的 @type 指令们可以告诉 VSCode，canvas 常量是一个 HTMLCanvasElement 类型的 DOM 节点。这时 VSCode 就会有自动补全了。 参考

@type 是一个 JSDoc 指令，更多资料参考：JSDoc

参考资料

• MDN