[JS] canvas 详解

创建 canvas

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    body {
      margin: 0;
    }
  style>
head>
<body>
  <canvas width="500" height="500">You browser doesn't support canvascanvas>
  <script>
    const cvs = document.querySelector('canvas')
    const context = cvs.getContext('2d')
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

可以通过 width 和 height 设置 canvas 的宽高（不带 px 单位），然后在 js 代码中获取 canvas 元素，调用 canvas.getContext('2d') 获取 2d 上下文。

简单绘图

可以通过 canvas context 的如下属性对图形的填充和描边进行设置：

context.fillStyle 图形的填充颜色，可以是十六进制颜色、rgb、颜色单词等
context.strokeStyle 描边颜色，可取值同上
context.lineWidth 线条宽度，不带 px 单位
context.fillRect(x, y, width, height) 绘画指定颜色填充的矩形
context.strokeRect(x, y, width, height) 描边指定颜色的矩形
context.clearRect(x, y, width, height) 清除指定区域的矩形，可以用来初始化画布、挖空图形

直接绘制矩形

context.fillStyle = 'red'
context.strokeStyle = 'blue'
// 在 (0, 0) 处绘制一个宽高为 100px 的正方形
context.fillRect(0, 0, 100, 100)
// 在 (200, 200) 处描边一个宽高为 100px 的正方形
context.strokeRect(200, 200, 100, 100)
// 清除所有图形（初始化画布）
context.clearRect(0, 0, 500, 500)
1
2
3
4
5
6
7
8

绘制路径

以下所有方法调用前，都必须使用 context.beginPath() 方法来声明开始绘制路径。

context.arc(x, y, radius, startAngle, endAngle, counterclockwise) 以 (x, y) 为圆心，radius 为半径，绘制指定起始角度到结束角度的弧线，counterclockwise 表示是否以逆时针计算起始角和结束角。可以设置 startAngle=0，endAngle=2 * Math.PI 绘制一个圆形。
context.moveTo(x, y) 将光标移动到 (x, y)
context.lineTo(x, y) 从当前光标起始位置绘制到 (x, y) 的线条
context.rect(x, y, width, height) 以 (x, y) 为起点创建一个矩形路径，和 fillRect 的区别是这个方法不会绘制实际的图形
arcTo(x1, y1, x2, y2, radius)以给定半径 radius，经由(x1, y1)绘制一条从上一点
到(x2, y2)的弧线

创建路径之后，可以使用 closePath() 方法绘制一条返回起点的线。如果路径已经完成，则既可以指定 fillStyle 属性并调用 fill() 方法来填充路径，也可以指定 strokeStyle 属性并调用 stroke() 方法来描画路径，还可以调用 clip() 方法基于已有路径创建一个新剪切区域。

绘制文本

绘制文本主要用下面两个方法：

fillText
strokeText

这两个方法的参数都是 str、x、y、maxWidth，表示要绘制的字符串的 x、y 坐标和最大宽度。

此外，最终绘制的文本还和 context 设置的文本格式有关：

// 字体
context.font = "bold 14px Arial"; 
// 在坐标中的对齐方式，如下是正常的对齐方式
context.textAlign = "center"; 
context.textBaseline = "middle"; 
1
2
3
4
5

变换、阴影、渐变

不想记了，见 MDN

相关阅读:
视频号直播弹幕采集
NPDP证书有用吗？值不值得考？
WebXR 技术调研 - 在浏览器中构建扩展现实（XR）应用
python集合
【python笔记】第三节用户交互与运算符
Zookeeper的Watch机制实现配置中心
京东双11商品标题怎么写？教你打造优质标题
C++参考好资源网址推荐
ARM 笔记
《计算机操作系统-第二章》之操作系统的运行机制与体系结构

原文地址：https://blog.csdn.net/qq_39559879/article/details/126927575