【canvas】canvas的基础使用（一）：创建canvas

最新推荐文章于 2024-05-24 23:45:01 发布

ZSK6

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量887

点赞数 28

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_43231248/article/details/137514867

版权

前端专栏收录该内容

51 篇文章 1 订阅

订阅专栏

canvas

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于 2D 图形。

canvas元素

<canvas> 元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

不同于 <img> 元素， <canvas>元素需要有闭合标签 (</canvas>).

canvas元素里的内容将在canvas api不支持的情况下显示，例如：

<canvas id="canvas" width="300" height="300">
  抱歉，你的浏览器不支持 canvas 元素
  （这些内容将会在不支持&lt;canvas%gt;元素的浏览器或是禁用了 JavaScript
  的浏览器内渲染并展现）
</canvas>

canvas元素属性

本元素支持全局属性。
height — 该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。
width — 该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

设置css的宽高只是改变canvas元素的宽高，自带的宽高属性定义的是替换元素后画布的宽高。

直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。

canvas上下文

canvas上下文是使用canvasDom引用的getContext()方法获得。如果上下文没有定义则返回 null 。

在同一个 canvas 上以相同的 contextType 多次调用此方法只会返回同一个上下文。

语法：
var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

contextType — 上下文类型（contextType），可选值有以下选项：
- “2d”, 建立一个 CanvasRenderingContext2D 二维渲染上下文。
- “webgl” (或"experimental-webgl") 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
- “webgl2” (或 “experimental-webgl2”) 这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。
- “bitmaprenderer” 这将创建一个只提供将 canvas 内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext 。
上下文属性 (contextAttributes)：
- 2d 上下文属性：
  - alpha: boolean值表明canvas包含一个alpha通道。如果设置为false, 浏览器将认为canvas背景总是不透明的，这样可以加速绘制透明的内容和图片。
- WebGL 上下文属性：
  - alpha: boolean值表明canvas包含一个alpha缓冲区。
  - antialias: boolean值表明是否开启抗锯齿。
  - depth: boolean值表明绘制缓冲区包含一个深度至少为 16 位的缓冲区。
  - failIfMajorPerformanceCaveat: 表明在一个系统性能低的环境是否创建该上下文的boolean值。
  - powerPreference: 指示浏览器在运行 WebGL 上下文时使用相应的 GPU 电源配置。可能值如下：“default”:自动选择，默认值。“high-performance”: 高性能模式。“low-power”: 节能模式。
  - premultipliedAlpha: 表明排版引擎将假设绘制缓冲区包含预混合 alpha 通道的boolean值。
  - preserveDrawingBuffer: 如果这个值为true缓冲区将不会被清除，会保存下来，直到被清除或被使用者覆盖。
  - stencil: 表明绘制缓冲区包含一个深度至少为 8 位的模版缓冲区boolean值。

返回值：

CanvasRenderingContext2D 为 “2d”,
WebGLRenderingContext 为"webgl" 和"experimental-webgl",
WebGL2RenderingContext 为"webgl2" 和"experimental-webgl2", 或者
ImageBitmapRenderingContext 为"bitmaprenderer".
如果 contextType 不是上述之一，返回null.

例子：
定义 <canvas> 元素：

<canvas id="canvas" width="300" height="300"></canvas>

通过如下代码可以获取 canvas2d 上下文：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { ... }

canvas坐标

以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
例如：
我们有一个宽高各150px的画布：
在这里插入图片描述

示例：

创建一个初始画布：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas1</title>
  <style>
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const cDom = document.getElementById("canvas")
    //  定义画布宽高
    // cDom.width = 200
    // cDom.height = 200
    const ctx = cDom.getContext("2d")
    ctx.fillStyle = 'green'

    ctx.fillRect(0, 0, cDom.width, cDom.height)
    console.log(cDom, ctx);

  </script>
</body>

</html>

画布初始宽高是300/150，我们改变了画布样式，然后使用fillRect方法绘制了一个绿色的矩形。
在这里插入图片描述

结语

结束了。

ZSK6

关注

28
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
0
评论
【canvas】canvas的基础使用（一）：创建canvas

Canvas API 提供了一个通过JavaScript 和 HTML的\元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。
复制链接

扫一扫