Canvas

Posted on Edited on In , ,

Canvas

只有两属性width和height，默认300*150

接下来我们就可以利用js，获取渲染上下文，然后在它上面绘制。

1
2
3
4
5
6
7
8
9
<script>
    ....
    // 获取canvas对象
    const canvas = document.getElementById('canvas')
    // 获取渲染上下文对象
    const ctx = canvas.getContext('2d')
    ...
</script>

Canvas Api

栅格

绘制图形

路径（Path）

主要四个参数

  1. beginPath
  2. closePath
  3. stroke
  4. fill

步骤

 1. 调用beginPath
 2. 调用目标函数
 3. 闭合（非必须）

移动笔触（moveTo）

直线（lineTo）

三角形（triangle）

矩形（rect）

圆形（arc）

样式、颜色

色彩（color）

绘制文本

操作图片

动画

实现动画的步骤

清理->绘制->清理->绘制…

实战

画板

粒子效果

【Canvas实战】仿明日方舟Logo粒子动画 vue3+ts - 掘金 (juejin.cn)