Canvas API-CanvasRenderingContext2D相关学习（上）

最新推荐文章于 2024-07-19 14:32:50 发布

咖啡不甜不要钱

最新推荐文章于 2024-07-19 14:32:50 发布

阅读量610

点赞数 1

分类专栏： Web API 文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/yuanhongkun/article/details/130610246

版权

本文介绍了Canvas API的基础知识，包括如何使用CanvasRenderingContext2D对象绘制矩形、文本和线条。重点讲解了clearRect()、fillRect()、strokeRect()方法以及文本相关属性和fillText()方法，帮助理解Canvas 2D图形绘制。

摘要由CSDN通过智能技术生成

1. 概述

Canvas API 提供了一个通过JavaScript的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。

使用 Canvas API 之前，需要在网页里面新建一个<canvas>元素。

<canvas id="myCanvas" width="400" height="250">
  您的浏览器不支持 Canvas
</canvas>

如果浏览器不支持这个 API，就会显示<canvas>标签中间的文字：“您的浏览器不支持 Canvas”。

每个<canvas>元素都有一个对应的CanvasRenderingContext2D对象（上下文对象）。Canvas API 就定义在这个对象上面。

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

上面代码中，<canvas>元素节点对象的getContext()方法，返回的就是CanvasRenderingContext2D对象。

注意，Canvas API 需要getContext方法指定参数2d，表示该<canvas>节点生成 2D 的平面图像。如果参数是webgl，就表示用于生成 3D 的立体图案，这部分属于 WebGL API。

Canvas 画布提供了一个作图的平面空间，该空间的每个点都有自己的坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

以下是 3 个绘制矩形位图的方法。

clearRect()

设置指定矩形区域内（以点 (x, y) 为起点，范围是*(width, height)* ）所有像素变成透明，并擦除之前绘制的所有内容。
fillRect()

绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height。
strokeRect()

在 canvas 中，使用当前的笔触样式，描绘一个起点在 (x, y) 、宽度为 w、高度为 h 的矩形。

注：请确保在调用 clearRect()之后绘制新内容前调用beginPath()。

void ctx.clearRect(x, y, width, height);

clearRect() 方法在一个矩形区域内设置所有像素都是透明的 (rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定。

参数：

x:矩形起点的x轴坐标。

y:矩形起点的y轴坐标。

width:矩形的宽度。

height:矩形的高度。

可以用该方法清除一部分画布内容。如下是清除整个画布内容。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, ca

关注