Javascript 简明教程
JavaScript - Canvas
Handling Canvas with JavaScript
HTML <canvas> 元素可用于创建图形并在网页上绘制图形。它可以在网页上绘制各种图形或形状(如线条、圆形等),并对它们进行动画处理。
The HTML <canvas> element can be used to create and draw graphics on the web page. It can draw various graphics or shapes, like lines, circles, etc., on the web page and animate them.
你可以在 HTML 中定义 <canvas> 元素,然后需要使用 JavaScript 在网页上绘制图形。让我们看看在 HTML 中定义 canvas 元素和使用 JavaScript 操作代码语法。
You can define <canvas> element in HTML, and after that, you need to use JavaScript to draw graphics on the web page. Let’s look at the syntaxes to define a canvas element in HTML and manipulate with JavaScript.
Syntax
使用以下语法创建 HTML canvas 元素。
Use the following syntax to create an HTML canvas element.
<canvas id="myCanvas" width="480" height="320">
Your browser does not support the HTML canvas tag.
</canvas>
在上述语法中,我们使用了 ID 为“myCanvas”的 HTML <canvas> 元素。当浏览器不支持 <canvas> 元素时,将显示写在 <canvas> 标签之间的信息。
In the above syntax, we have defined the HTML <canvas> element with id as 'myCanvas'. The message written in between <canvas> tags will be displayed when the browser doesn’t support the <canvas> element.
我们使用文档对象的方法 getElementById() 来访问 Canvas 元素。查看下面的语法 −
We access the canvas element using the getElementById() method of document object. Look at below syntax −
var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');
在 JavaScript 中,我们可以使用 getContext('2d') 方法来获取画布(Canvas)的上下文。接下来,我们可以使用不同的方法来绘制图形并填充颜色,其中将“ctx”变量作为引用。
In JavaScript, we can use the getContext('2d') method to get the context of the 2D canvas. Next, we can use various methods to draw a shape and fill in the color by taking the 'ctx' variable as a reference.
Examples
Example: Drawing a rectangle
在下面的代码中,我们在 HTML 中添加了 <canvas> 元素。
In the code below, we have added the <canvas> element in HTML.
在 JavaScript 中,我们使用了 getContext('2d') 方法来访问画布(Canvas)的上下文。然后,我们使用 fillstyle() 方法来为画布(Canvas)中的元素填充颜色。fillRect() 方法用于绘制矩形。它取画布中 4 个角的坐标。
In JavaScript, we have used the getContext('2d') method to access the context of the canvas. After that, we used the fillstyle() method to color the element in the canvas. The fillRect() method is used to draw a rectangle. It takes the coordinates of 4 corners in the canvas.
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing Rectangle on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Drawing rectangle using canvas
ctx.fillStyle = "#FF0000";
ctx.fillRect(50,30, 470, 240);
</script>
</body>
</html>
Example: Drawing a circle
在下面的代码中,我们使用 arc() 方法绘制一个圆形。它采用圆形位置的坐标作为前两个参数,并将圆形的半径作为第三个参数。
In the code below, we used the arc() method to draw a circle. It takes the coordinates for the circle position as the first 2 parameters and the radius of the circle as a third parameter.
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing circle on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = c.getContext("2d");
// Drawing circle using canvas
ctx.beginPath();
ctx.arc(300, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();
</script>
</body>
</html>
Example: Drawing a lines
在下面的代码中,我们使用了 moveTo() 和 lineTo() 方法绘制了线条。moveTo() 方法将线的起点作为参数,lineTo() 方法将线的终点作为参数。
In the code below, we have drawn the lines using the moveTo() and lineTo() methods. The moveTo() method takes the starting point of the line as a parameter, and the lineTo() method takes the ending point of the line as a parameter.
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing lines on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Drawing lines using canvas
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
ctx.moveTo(300, 200);
ctx.lineTo(400, 0);
ctx.stroke();
</script>
</body>
</html>
Example: Drawing a Linear gradient
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing linear gradient on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Drawing a linear gradient
ctx.beginPath();
var grd = ctx.createLinearGradient(0, 0, 440, 0);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 550, 240);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
Example: Text Rendering
在下文示例中,我们已在画布上呈现文本消息“Hello”。为此,我们使用了填充文本()方法。HTML 画布中的填充文本()方法在画布元素上绘制文本字符串。
In the below example, we have rendered a text message "Hello" on the canvas. For this, we have used fillText() method. The fillText() method in HTML Canvas draws a text string on a canvas element.
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Rendering text on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
// Getting the 2D context of the canvas
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>
我们已学会在 HTML 中使用 <canvas> 元素并通过使用 JavaScript 访问 DOM 元素来绘制图形。我们可以绘制各种形状,并为形状添加颜色。
We have learned to use <canvas> elements in HTML and draw graphics by accessing elements using JavaScript. We can draw various shapes and add colors to shapes.