DZone>Web Dev Zone>HTML5 Canvas入门
HTML5 画布入门
让我们来看看如何使用HTML Canvas。
通过
CORE -
Apr. 26, 22 - Web Dev Zone -教程
喜欢 (4)
评论
保存
鸣叫
3.03K浏览次数
加入DZone社区，获得完整的会员体验。
HTML 画布是在 JavaScript 和 HTML 中创建图形的最简单方法。您可能还看到它被称为 HTML5 Canvas，这与向 HTML5 的转变密切相关。
HTML Canvas可能很难上手。但是，如果你同意，你并不孤单。因此，在本指南中，让我们了解一下HTML画布的基础知识以及如何使用它。
如何使用HTML5画布
要开始使用HTML5画布，我们需要创建一个<canvas> 元素。这只是一个空标签，它将包含由我们的JavaScript产生的图形。在HTML中，我们可以通过编写以下内容来创建一个画布。
<canvas id="myCanvas" width="400" height="200"></canvas>
你可能经常看到画布有预定的宽度和高度，如果我们制作的图形必须有特定的尺寸，这很有帮助。你也可以把你的画布设置为宽度和高度都是100%。
这就是你在HTML方面需要做的所有事情。接下来，让我们看看如何启动一个原始画布，在上面开始制作图形。
用 JavaScript 创建 HTML5 画布
要制作画布，我们要做的下一件事是选择画布元素，并为其应用一个上下文。
使用 getContext() 将上下文应用于我们的 HTML5 画布
画布元素可以添加一个上下文，它可以是以下其中之一。
- 2d- 一个用于渲染 2d 图形的 2 维上下文。
- webgl- 一个用于渲染3D物体的3维上下文。
- bitmaprenderer- 只允许我们用BitImage的东西替换canvas的上下文。
尽管所有这些都很有用，但对于大多数画布工作，我们使用2D。所以，让我们开始选择我们的画布元素并应用正确的上下文。
let myCanvas = document.getElementById('myCanvas');
// Set the context of our canvas
let context = myCanvas.getContext('2d');
以上，我们现在有一个变量，即context，我们可以用它来在我们的画布上绘制图形。虽然我把这个变量称为context，但通常会把它命名为ctx。
记住JavaScript的顺序
如果你在工作中遇到困难，请确保你的 JavaScript 在你的<canvas> 元素之后。在我们选择它之前，HTML 元素必须存在。
在我们的画布上作画
现在我们有了我们的上下文；我们可以开始在上面绘图了。HTML画布有几种不同的绘制方式。让我们看看一个基本的例子--创建一个矩形。
let myCanvas = document.getElementById('myCanvas');
// Set the context of our canvas
let context = myCanvas.getContext('2d');
// Begin drawing something on the context
context.beginPath();
// Draw a rectangle using the rect() function
context.rect(188, 50, 200, 100);
// Fill our rectangle
context.fillStyle = '#13caa7';
context.fill();
// Add a border to our rectangle
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
// Finish our rectangle
context.closePath();
这个代码的输出
代码输出
正如你所看到的，HTML画布的绘制可以很快变得相当冗长。因此，让我们在创建上下文后，逐节分解代码。
context.beginPath()
我们用beginPath()开始画布上的任何新形状或绘图。这让我们把一个形状的信息与下一个形状的信息分开。
context.rect(10, 10, 100, 120)
这是一个标准的形状函数；x、y、宽度和高度参数。上面的代码然后创建了一个从上到下10px、从左到右10px的矩形，宽度为100px，高度为120px。
context.fillStyle, context.fill()
在第一行中，fillStyle设置了颜色，并通过函数fill()填充了形状。
context.lineWidth, strokeStyle, stroke()
这些看起来应该和上一节很熟悉--我们用lineWidth设置边框的像素宽度，然后用strokeWidth设置颜色，用stroke()动作描边。
context.closePath()
我们的矩形现在已经完成了--我们用closePath() 函数来完成它。现在我们已经关闭了我们的路径，如果我们愿意，我们可以自由地创建更多的形状。
使用 HTML5 Canvas 绘制多个形状
由于我们使用的是 JavaScript，所以我们可以通过编程的方式用画布绘制形状。例如，我们可以使用 while 循环来绘制许多矩形，这些矩形都在彼此的旁边。
代码输出
这方面的代码与我们之前遵循的概念相同--唯一不同的是，我们使用 while() 循环来绘制更多的矩形，直到画布被重申为整个。
在 HTML5 Canvas 中使用 while 循环。
let myCanvas = document.getElementById('myCanvas');
// Set the context of our canvas
let context = myCanvas.getContext('2d');
// Draw a rectangle using the rect() function
let startX = 10;
let startY = 10;
let rectWidth = 100;
let rectHeight = 100;
while(startY < newCanvas.height) {
// Begin drawing something on the context
context.beginPath();
// Draw our canvas
context.rect(startX, startY, rectWidth, rectHeight);
// Fill our rectangle
context.fillStyle = '#13caa7';
context.fill();
// Add a border to our rectangle
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
// Finish our rectangle
context.closePath();
startX += rectWidth + 10;
console.log(startX, startY, newCanvas.width, newCanvas.height)
if(startX > newCanvas.width - 100) {
startX = 10;
startY += rectHeight + 10;
}
if(startY > newCanvas.height - 100) {
startX = newCanvas.width + 50;
startY = newCanvas.height + 50;
}
}
结论
在这篇介绍中，我们了解了如何创建 HTML5 画布以及如何在画布上绘制基本形状。我们已经介绍了如何通过 JavaScript 使用 while 循环在画布上反复绘制。以此为基础，您将能够进行更多的试验和尝试。我希望你喜欢这篇文章。
HTML
经Johnny Simpson授权发表于DZone，DZone MVB。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
