【图形】canvas 攻略

canvas攻略

一、什么是canvas

Canvas 是 HTML5 中的一个重要特性,它是一个用于在网页上绘制图形的 HTML 元素。Canvas 允许开发者通过 JavaScript 脚本来动态绘制图形,包括 2D 和 WebGL(3D)两种模式。

二、canvas和webgl的区别

  • 渲染方式:

    • Canvas:Canvas 使用的是 2D 渲染方式,可以绘制简单的图形、文本和图像,以及进行基本的图形变换和合成。
    • WebGL:WebGL 使用的是 3D 渲染方式,基于 OpenGL ES 标准,可以实现更高级的 3D 图形渲染,包括光照、阴影、纹理映射等功能。
  • 编程接口:

    • Canvas:Canvas 使用的是简单的 2D 绘图 API,主要包括绘制路径、图形、文本、图像等基本操作。
    • WebGL:WebGL 使用的是底层的 OpenGL ES 标准,需要编写复杂的着色器程序(顶点着色器和片元着色器)来控制图形渲染过程。
  • 性能和功能:

    • Canvas:Canvas 在处理简单的图形和图像时性能较好,但对于复杂的图形、动画和交互性较强的场景则受到限制。
    • WebGL:WebGL 提供了更强大的渲染能力,可以实现复杂的 3D 图形渲染,以及高性能的图形处理和动画效果。
  • 学习曲线:

    • Canvas:Canvas 使用简单,学习曲线较低,适合初学者和实现简单的图形和动画。
    • WebGL:WebGL 使用复杂,需要对图形学和计算机图形渲染有一定的了解,学习曲线较陡,适合有一定经验的开发者或专业的图形开发人员。

三、2D图形绘制

Canvas 元素

Canvas 元素是 HTML5 中的一个标签,用于在网页上创建一个绘图区域。通过 Canvas 元素,开发者可以在其中绘制图形、文本、图像等内容。

1
<canvas id="myCanvas" width="500" height="300"></canvas>

绘图环境(Context)

Canvas 元素本身并不能绘制图形,需要使用 JavaScript 获取 Canvas 元素的绘图环境(Context),然后通过绘图环境来进行绘制操作。Canvas 提供了 2D 和 WebGL 两种绘图环境。

1
2
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d'); // 获取 2D 绘图环境

绘制路径

  • beginPath(): 开始一个新路径

    beginPath() 的主要作用是告诉 Canvas 你要开始绘制一个新的路径。调用 beginPath() 方法后,Canvas 会清除之前的路径信息,并将绘图游标移动到起始位置。这样做的目的是确保每次绘制的路径都是独立的,不会受到之前路径的影响。它通常是路径绘制的第一步,在开始一个新的路径之前调用。

  • moveTo(x, y): 将绘图游标移动到指定位置

  • lineTo(x, y): 绘制一条从当前位置到指定位置的直线

  • arc(x, y, radius, startAngle, endAngle, anticlockwise): 绘制一段圆弧路径

  • closePath(): 封闭当前路径

    closePath() 方法的主要作用是将当前路径的起始点和终点连接起来,形成一个封闭的路径。通常在绘制路径的最后调用 closePath() 方法,可以将路径的起始点和终点连接起来,从而形成一个封闭的图形,使得填充和描边效果更加清晰和准确。

  • stroke(): 绘制路径边框

    1
    2
    3
    4
    5
    6
    ctx.beginPath();
    ctx.moveTo(50, 50); // 起点
    ctx.lineTo(150, 100); // 终点
    ctx.lineWidth = 2; // 设置线宽
    ctx.strokeStyle = 'blue'; // 设置线条颜色
    ctx.stroke(); // 绘制路径的边框

    stroke() 方法用于绘制路径的边框,即绘制路径的轮廓线。它会沿着路径的轮廓线绘制出一条线条,该线条的样式由当前的绘图样式(如线条颜色、线条宽度等)决定。调用 stroke() 方法后,Canvas 会根据当前路径的轮廓线样式在画布上绘制出路径的边框。

  • fill(): 填充路径内部

    1
    2
    3
    4
    5
    6
    7
    ctx.beginPath();
    ctx.moveTo(100, 100); // 起点
    ctx.lineTo(200, 100);
    ctx.lineTo(150, 150);
    ctx.closePath(); // 封闭路径,连接起点和终点
    ctx.fillStyle = 'green'; // 设置填充颜色
    ctx.fill(); // 填充路径的内部

    fill() 方法用于填充路径的内部,即在路径所围成的区域内填充一种颜色或图案。调用 fill() 方法后,Canvas 会根据当前的填充样式(如填充颜色、渐变、图案等)填充路径所围成的区域。

绘制文本

  • fillText(text, x, y [, maxWidth]): 在指定位置绘制填充文本

    fillText() 方法的主要作用是在 Canvas 上绘制指定文本,并以填充方式呈现。它可以在 Canvas 上的指定位置(x, y 坐标)绘制指定的文本字符串,并可以指定最大宽度(可选),当文本的宽度超过指定的最大宽度时,文本会自动换行。

  • strokeText(text, x, y [, maxWidth]): 在指定位置绘制文本边框

    strokeText() 方法的主要作用是在 Canvas 上绘制指定文本的描边。它可以在 Canvas 上的指定位置(x, y 坐标)绘制指定的文本字符串,并以描边方式呈现。描边是指文本周围的轮廓线,而不是填充文本内容。

绘制图像

  • drawImage(image, x, y [, width, height]): 在指定位置绘制图像

绘制圆弧和圆

  • arc(x, y, radius, startAngle, endAngle [, anticlockwise]): 绘制圆弧
  • arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径绘制圆弧
  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]): 绘制椭圆弧
  • circle(x, y, radius): 绘制圆

设置样式

  • strokeStyle: 设置绘制路径边框的颜色
    1
    ctx.strokeStyle = 'red';
  • fillStyle: 设置填充图形的颜色、渐变或图案
    1
    ctx.fillStyle = 'blue';
  • lineWidth: 设置绘制路径的线宽
    1
    ctx.lineWidth = 2;
  • font: 设置文本的字体样式和大小
    1
    ctx.font = 'italic 20px Arial';
  • textAlign: 设置文本的水平对齐方式
    1
    ctx.textAlign = 'center'; // 可选值:'start', 'end', 'left', 'right', 'center'
  • textBaseline: 设置文本的垂直对齐方式
    1
    ctx.textBaseline = 'middle'; // 可选值:'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'
  • globalAlpha: 设置绘图的透明度
    1
    ctx.globalAlpha = 0.5; // 取值范围:0(完全透明)到 1(完全不透明)
  • shadowColor: 设置阴影的颜色
    1
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
  • shadowBlur: 设置阴影的模糊程度
    1
    ctx.shadowBlur = 10;
  • shadowOffsetX 和 shadowOffsetY: 设置阴影的偏移量
    1
    2
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;

其他

  • clearRect(x, y, width, height):清除指定矩形区域内的像素,使其变为透明。

    clearRect() 方法的主要作用是在 Canvas 上清除指定矩形区域内的像素,将这些像素设为透明。这个方法常用于清除 Canvas 上的部分内容,以便后续绘制新的图形或动画。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 绘制一个矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);

    // 清除矩形区域内的像素
    ctx.clearRect(60, 60, 80, 80);
  • translate(x, y):将 Canvas 坐标系原点移动到指定位置。

  • rotate(angle) :旋转 Canvas。

    rotate(angle) 方法用于旋转 Canvas 的坐标系统。它接受一个参数 angle,表示旋转的角度,单位为弧度。正值表示顺时针旋转,负值表示逆时针旋转。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 以 Canvas 原点为中心顺时针旋转 45 度
    ctx.rotate(Math.PI / 4);

    // 绘制旋转后的图形
    // 注意:在旋转后绘制图形时,坐标系已经发生了变化,需要根据旋转后的坐标系进行绘制
    ctx.fillRect(50, 50, 100, 100);
  • scale(x, y):缩放 Canvas。

    scale(x, y) 方法用于缩放 Canvas 的坐标系统。它接受两个参数 x 和 y,分别表示沿 x 轴和 y 轴的缩放比例。如果只传递一个参数,则表示沿 x 和 y 轴同时缩放相同比例。

    1
    2
    3
    4
    5
    6
    7
    8
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 沿 x 轴和 y 轴同时放大两倍
    ctx.scale(2, 2);

    // 绘制放大后的图形
    ctx.fillRect(50, 50, 100, 100);
  • clip():将当前路径设为裁剪路径,只有在裁剪路径范围内的内容才会被绘制。

    clip() 方法用于将当前路径设置为裁剪路径,只有在裁剪路径范围内的内容才会被绘制出来。这个方法可以用来实现各种有趣的图形裁剪效果,比如只显示某个区域内的内容,或者根据路径形状裁剪图像等。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 绘制一个圆形路径
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, Math.PI * 2);
    ctx.closePath();

    // 将当前路径设置为裁剪路径
    ctx.clip();

    // 在裁剪路径内绘制一个矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);
  • toDataURL(type, encoderOptions):将 Canvas 上的内容转换为 Data URL。

    toDataURL() 方法的主要作用是将 Canvas 中的图像数据转换为一个 base64 编码的 URL 字符串。这个 URL 字符串可以用作 <img> 元素的 src 属性,也可以用于其他需要图像数据的地方,比如设置背景图片、生成下载链接等。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 在 Canvas 上绘制图像
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);

    // 将 Canvas 中的图像数据转换为 base64 编码的 URL 字符串
    var imageDataURL = canvas.toDataURL();

    // 创建一个新的图像元素,并设置其 src 属性为转换后的 URL 字符串
    var img = new Image();
    img.src = imageDataURL;

    // 将图像元素添加到页面中
    document.body.appendChild(img);

喜欢这篇文章?打赏一下支持一下作者吧!
【图形】canvas 攻略
https://www.cccccl.com/20230402/图形/canvas 攻略/
作者
Jeffrey
发布于
2023年4月2日
许可协议