效果
效果图知识点
- 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
网友评论