Canvas.getcontext全面解析

二、canvas.getcontext介绍

`canvas.getContext`方法是用来获得一个canvas元素的上下文（context）对象，通过该方法返回的对象可以在canvas画布上进行绘制。

//获取canvas元素
const canvas = document.getElementById('myCanvas');
//在canvas画布上创建2D图形上下文
const ctx = canvas.getContext('2d');

Canvas的contextType属性有多个可选值，其中最常用的是2D和WebGL。其中，2D上下文实现了2D渲染，并且2D渲染的速度要比WebGL快，但是2D渲染能力弱于WebGL，同时不能进行3D场景的渲染。

当然，除了2D渲染和WebGL之外，还有ImageBitmapRenderingContext、OffscreenCanvasRenderingContext2D和WebGL2RenderingContext等上下文类型

三、2D上下文下的常用方法

2D上下文常见的方法有绘制矩形、绘制字符、绘制图像、绘制路径和绘制动画等。下面简单介绍下几个常用的方法。

1. 绘制矩形

使用如下代码可以在canvas画布上绘制一个矩形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 150, 75);

fillRect(x,y,width,height) 方法用矩形填充画布起始点为( x , y ) ，矩形的宽和高分别为 width 和 height .

2. 绘制字符

使用如下代码可以在canvas画布上绘制字符：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px serif';
ctx.fillText('Hello World', 10, 50);

fillText() 方法用于填充指定的文本，填充的起点为 (x, y), x,y代表字符串基线的位置，所以字符串的真实位置将会比这个位置高出字号的相应距离

3. 绘制图像

使用如下代码可以在canvas画布上绘制一个图像：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function () {
    ctx.drawImage(img, 10, 10);
};
img.src = 'example.png';

drawImage() 方法用于画出指定图像元素。该方法可以使用以下三种方式为调用者指定图像元素 ：

• 使用 HTMLImageElement 元素。
• 使用 HTMLCanvasElement 元素。
• 使用 HTMLVideoElement 元素。

四、WebGL中的canvas.getcontext

通过 Web Graphics Library（WebGL）技术，可以以显式高性能低级别的方式，将3D渲染引擎融入HTML5的画布元素中。WebGL利用了HTML5 Canvas标签，使其可以替代图形处理单元（GPU）。WebGL是一种基于OpenGL ES2.0的3D绘图标准，它提供了一个JavaScript API，可以呈现互动式 3D应用。

//获取canvas元素
const canvas = document.getElementById('myCanvas');
//在canvas画布上创建WebGL上下文
const gl = canvas.getContext('webgl');

调用canvas.getContext方法时传入字符串“webgl”即可获取WebGL上下文对象。

五、总结

通过本文对canvas.getContext方法的介绍，我们可以深入了解到canvas上下文对象的作用和用途，准确使用canvas API方法，从而在不同的场景创建符合业务需要的图形和动画效果。