Canvas的基本介绍与使用

最新推荐文章于 2024-12-25 10:31:01 发布

白桃与猫

最新推荐文章于 2024-12-25 10:31:01 发布

阅读量1k

点赞数 24

分类专栏： JavaScript深入文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_52395343/article/details/139435216

版权

JavaScript深入专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. Canvas 基本介绍

Canvas 是 HTML5 中引入的一个重要特性，它允许网页动态渲染二维图形.。通常使用JavaScript 脚本来绘制·canvas·元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。

<canvas> 是一个内联元素，默认尺寸为 300px 宽 × 150px 高。
也可以通过设置 width 和 height 属性来调整画布的大小。

由于 Canvas 是基于矢量的，所以缩放不会影响图形质量。

2. Canvas 基本用法

为了在 Canvas 上绘制图形，需要一个canvas 元素的 2D 渲染上下文对象。通过调用 canvas 元素的getContext('2d')方法，可以获取到这个2D绘图上下文，然后利用它来绘制图形，如线条、矩形、圆形、文本、图像等，以及进行颜色填充、描边、变换和渐变等操作。

在我们开始画图之前，需要了解一下画布栅格（canvas grid）以及坐标空间。
在这里插入图片描述

如上图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。

2.1 矩形绘制

ctx.fillRect(x, y, width, height) 绘制填充矩形

    <canvas id="canvas" width="600" height="600"></canvas>

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

ctx.fillStyle = "green";//填充颜色
ctx.fillRect(20, 10, 200, 100);//绘制填充矩形,默认黑色

在这里插入图片描述

ctx.strokeRect(x, y, width, height) 绘制描边矩形

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";// 描边颜色
ctx.strokeRect(20, 10, 160, 100);

在这里插入图片描述
ctx.clearRect(x, y, width, height) 清除指定区域

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
ctx.clearRect(20,10,50,50)
ctx.clearRect(60,10,30,30)

在这里插入图片描述

2.2 路径绘制

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.beginPath();// 新建一条路径
    ctx.moveTo(75, 50);// 设置起点位置
    ctx.lineTo(100, 75);// 画一条线
    ctx.lineTo(100, 25);
    ctx.fillStyle = "orange";
    ctx.fill();// 填充实心
  }

在这里插入图片描述
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()
通过线条来绘制图形轮廓。

fill()
通过填充路径的内容区域生成实心的图形。

moveTo(x, y)
将笔触移动到指定的坐标 x 以及 y 上。

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

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆弧路径
圆心在 (x, y) 位置，半径为 r，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
startAngle：圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
endAngle：圆弧的终点，单位以弧度表示。

📢注意：arc() 函数中表示角的单位是弧度，不是角度。角度与弧度的 js 表达式：弧度=(Math.PI/180)* 角度。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI);
ctx.stroke();

在这里插入图片描述

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// 上方实心大半圆
ctx.beginPath();
ctx.arc(100, 75, 50, 90, 2* Math.PI);
ctx.fill();

// 下方空心小半圆
ctx.beginPath();
ctx.arc(100, 75, 50,0, 2* Math.PI);
ctx.stroke();
ctx.beginPath();

在这里插入图片描述
Path2D() 用于定义复杂的路径，高效地创建和存储路径数据，这些路径可以是直线、曲线、圆弧等形状的组合。

📢 备注：当调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);
    
    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);
    
    ctx.stroke(rectangle);
    ctx.fill(circle);
  }

在这里插入图片描述

📢 注意：这是一项实验性技术，在将其用于生产之前，请仔细检查浏览器兼容性表格。

2.3 设置样式

fillStyle 设置图形的填充颜色
strokeStyle 设置图形轮廓的颜色

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

createLinearGradient(x0, y0, x1, y1) 创建线性渐变对象（x0, y0 是渐变的起始点坐标，x1, y1 是渐变的终点坐标）

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

    // 创建线性渐变对象
    let gradient = ctx.createLinearGradient(0, 0, 100, 0);

    // 定义渐变颜色
    gradient.addColorStop(0, 'red');
      gradient.addColorStop(1, 'pink');

    // 应用渐变为填充色并绘制矩形
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 100, 100);

在这里插入图片描述

2.4 文本绘制

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本

  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);

在这里插入图片描述

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

  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);

在这里插入图片描述

🔍设置文本其他样式

3. 加载图片和视频

drawImage() 方法在 Canvas API 中用于在画布上绘制图像、视频或另一个画布的内容。
drawImage(image, dx, dy, dWidth, dHeight)
image：绘制到上下文的元素。
dx：image 的左上角在目标画布上 X 轴坐标。
dy：image 的左上角在目标画布上 Y 轴坐标。
dWidth：image 在目标画布上绘制的宽度
dHeight：image 在目标画布上绘制的高度

3.1 加载图片

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        var image = new Image();
        // 图片加载后执行
        image.onload = function() {
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

3.2 加载视频

要实现这一点，通常会结合使用<video>元素和 Canvas 的 drawImage() 方法。

   <video id="myVideo" src="test.mp4" autoplay loop></video>
    <canvas id="canvas" width="600" height="400"></canvas>

   var video = document.getElementById('myVideo');
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   function draw() {
     if (video.paused || video.ended) return;
     // 绘制视频帧至Canvas
     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
     // 每一帧都调用该方法
     requestAnimationFrame(draw);
   }

   video.addEventListener('canplay', draw);

参考：🔍MDN: Canvas介绍