canvas（画布）

最新推荐文章于 2024-08-05 22:52:23 发布

smile_team

最新推荐文章于 2024-08-05 22:52:23 发布

阅读量544

点赞数

分类专栏：动画文章标签： html5

本文链接：https://blog.csdn.net/smile_team/article/details/108584850

版权

本文详细介绍了HTML5的canvas元素，包括canvas的基本概念、设置画布大小、获取呈现上下文、绘制圆形、各种图案、渐变以及图像处理。通过JavaScript，canvas提供了丰富的绘图功能，如fillRect、strokeRect、createLinearGradient等，使得在网页上动态绘制图像和图形变得可能。

摘要由CSDN通过智能技术生成

HTML5

canvas是什么

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
画布是一个矩形区域，我们可以控制其每一像素
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

注意事项：

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
不同于img元素, "canvas"元素需要有闭合标签 canvas

设置画布的大小

直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样
可以使用CSS的width和height以在渲染期间缩放图像以适应样式大小，就像img元素一样

呈现上下文

渲染上下文，用于创建和操作显示的内容
画布最初是空白的。要显示某些内容，脚本首先需要访问呈现上下文并使用它。这个``元素有一个名为getContext，用于获取呈现上下文及其绘图功能。getContext()接受一个参数，即上下文的类型
- getContext（contextType）/ (contextType,contextAttributes)
  - contextType
    - “2d”，导致创建了一个CanvasRenderingContext2D对象，表示二维呈现上下文
    - webgl(或experimental-webgl)，它将创建一个WebGLRenderingContext对象，表示三维呈现上下文。此上下文仅在实现WebGL版本1
    - webgl2，这将创建一个WebGL2RenderingContext对象，表示三维呈现上下文。此上下文仅在实现WebGL版本2
    - bitmaprenderer，这将创建一个ImageBitmapRenderingContext，它只提供功能，将画布的内容替换为给定的ImageBitmap(接口 “https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap”)
  - contextAttributes
    - ```
    const gl = canvas.getContext('webgl', {
      antialias: false,
      depth: false
    });
```
- alpha布尔值，指示画布是否包含alpha通道。如果设置为false，浏览器现在知道背景总是不透明的，这可以加快透明内容和图像的绘制速度
- desynchronized布尔值，它提示用户代理通过从事件循环去同步画布绘制周期来减少延迟