Canvas.getcontext全面解析

一、canvas簡介

是HTML5提供的一種新穎的HTML元素，開發者可以在它內部繪製圖形、動畫、遊戲等等。Canvas元素是基於位圖形式生成內容的，在實際應用中可以用於創建圖像編輯器、圖表、3D渲染等。Canvas元素通過JavaScript API來繪製圖形，其中最核心的一份API就是`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方法，從而在不同的場景創建符合業務需要的圖形和動畫效果。