前端Jeek

webgl与canvas

2023/8/28 webgl3Dcanvas

🌙 Canvas (opens new window)

Canvas 是HTML5的一个标签，Canvas提供了给JavaScript在浏览器内绘制的能力。

不同于img标签的自闭和，canvas必须要有闭合标签；能直接在canvas标签上设置宽高尽量直接在标签属性设置宽高，其次可以通过js来设置，尽量不要通过css样式来设置宽高，可能会出现拉伸等情况，这一点MDN (opens new window)也给出了说明

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); // 获取canvas上下文

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
1
2
3
4
5

Canvas只支持一些简单的2D绘制，不支持3D，更重要的是性能有限，WebGL弥补了这两方便的不足。

上下文的类型有三种，分别是：

  • 2d：代表一个二维渲染上下文
  • webgl：代表一个三维渲染上下文
  • webgl2：代表一个三维渲染上下文；这种情况下只能在浏览器中实现 WebGL 版本2 (OpenGL ES 3.0)

🌙 canvas demo

🌙 1.画圆

使用context.arc(x, y, r,angle1, angle2, direction)来绘制一个圆，其中参数的含义为：

  • x：圆心x坐标
  • y：圆心y坐标
  • r：半径
  • angle1：起始角度，默认水平向右，也就是三点钟
  • angle2：结束角度，从开始角度旋转的度数
  • direction：旋转方向，true是逆时针，false是顺时针

See the Pen canvas-⚪ by Keekuun (@keekuun) on CodePen.

🌙 2.画矩形 (opens new window)

绘制矩形，有三个API与绘制矩形有关，分别是：

  • fillRect(x, y, width, height):绘制一个填充的矩形
  • strokeRect(x, y, width, height):绘制一个矩形的边框
  • clearRect(x, y, width, height):清除指定矩形区域，让清除部分完全透明。
  • rect(x, y, width, height):绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。

See the Pen canvas-囗 by Keekuun (@keekuun) on CodePen.

🌙 3.使用Path2D (opens new window)

See the Pen canvas-囗 by Keekuun (@keekuun) on CodePen.

🌙 4.使用渐变 (opens new window)

See the Pen canvas-囗 by Keekuun (@keekuun) on CodePen.

🌙 5.更多demeo (opens new window)

See the Pen canvas-渐变 by Keekuun (@keekuun) on CodePen.

WebGL API