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 元素
(这些内容将会在不支持<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值。
- 2d 上下文属性:
返回值:
- 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方法绘制了一个绿色的矩形。
结语
结束了。