在本文中,我们将研究HTML canvas元素和JavaScript canvas API,以便在我们的网页上渲染复杂的形状。
设置
我们需要开始的是一个HTML页面,带有面板标签和JavaScript文件来操纵它。
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <meta charset="UTF-8"/>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7 <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
8 <title>HTML Canvas</title>
9 </head>
10 <body>
11
12 <canvas></canvas>
13
14 </body>
15 <script src="./canvas.js"></script>
16</html>
有了我们的画布元素,我们现在需要创建一个新的变量和画布背景,这将为我们的画布添加大量功能。
对于我们的例子,我们需要我们的画布是全屏,但使用CSS设置大小会产生一种奇怪的模糊效果,我们显然不想要,所以我们必须在这里设置它。
1[label canvas.js]
2// getting a reference to our HTML element
3const canvas = document.querySelector('canvas')
4
5// initiating 2D context on it
6const c = canvas.getContext('2d')
7
8addEventListener('resize', () => {
9 canvas.width = innerWidth
10 canvas.height = innerHeight
11})
正方形
为了绘制直角形,在我们的背景变量(c)上,我们可以开始添加我们想要的,以像素计量:
「正(x-axis, y-axis, width, height)」: 設定我們的直角的位置和尺寸,並需要在「stroke」或「fill」之前被稱為「正(x-axis, y-axis, width, height)」 *「stroke」: 顯示前面的一切事物的概要 *「fill」: 顯示整個形狀為固體顏色 *「strokeStyle」和「fillStyle」: 顯示前面的一切事物的概要和形狀顏色 *「stroke」: 顯示前面的一切事物的功能 *「strokeR
1[label canvas.js]
2c.strokeStyle = 'white'
3c.fillStyle = 'blue'
4c.rect(100, 20, 150, 100)
5c.stroke()
6c.fill()
7
8c.fillStyle = 'red'
9c.fillRect(400, 500, 300, 250)
10
11// Uncomment to remove the first two blocks
12// c.clearRect(0, 0, canvas.width, canvas.height)
13c.fillStyle = 'green'
14c.fillRect(1500, 500, 300, 250)
线
beginPath: 启动新线stroke: 返回线moveTo(x轴,y轴): 设置起点lineTo(x轴,y轴): 返回前端点lineWidth: 设置线的厚度
以下是几个例子,我们绘制了一些线条:
1// Just a basic line
2c.beginPath()
3c.moveTo(40, 250)
4c.lineTo(200, 500)
5c.strokeStyle = 'red'
6c.stroke()
7
8// Draw the letter M
9c.beginPath()
10c.moveTo(1500, 700)
11c.lineTo(1600, 450)
12c.lineTo(1700, 700)
13c.lineTo(1800, 450)
14c.lineTo(1900, 700)
15c.strokeStyle = 'blue'
16c.stroke()
17
18// Let's now draw a house
19c.lineWidth = 10
20c.strokeStyle = 'red'
21c.fillStyle = 'red'
22
23// Walls
24c.strokeRect(800, 500, 300, 200)
25
26// Door
27c.fillRect(925, 600, 50, 100)
28
29// Roof
30c.beginPath()
31c.moveTo(700, 500)
32c.lineTo(1200, 500)
33c.lineTo(950, 300)
34c.lineTo(700, 500)
35c.stroke()
圈子
我们真正需要绘制圆圈的唯一方法是弓。角是以直径而不是度的,所以对于我们的终端角度,我们可以使用Math.PI * 2,因为这等于360度,而起点角度可以留在0。
arc(x,y,半径,起点角度,终点角度,反时钟(boolean))
1[label canvas.js]
2c.lineWidth = 5
3c.beginPath()
4c.arc(400, 400, 50, 0, Math.PI * 2)
5c.stroke()
四方曲线和贝泽曲线
如果你曾经使用过Photoshop或Affinity Designer等图形设计工具,这些工具看起来非常相似。
基本上,平方曲线和贝齐尔曲线只是不同控制方法的自由形状线条。 平方曲线更简单,因为它们只有一个开始点,终点和被称为控制点的点,它作为弯曲线的握手。 您可以看到一个奇妙的互动示例(这里)(http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html)。
quadraticCurveTo(controlPoint-x, controlPoint-y, endpoint-x, endpoint-y)bezierCurveTo(startControlPoint-x, startControlPoint-y, endControlPoint-x, endControlPoint-y, endpoint-x, endpoint-y)
还有几个例子:
1[label canvas.js]
2c.lineWidth = 5
3c.strokeStyle = 'white'
4
5c.beginPath()
6c.moveTo(400, 400)
7c.lineTo(400, 300)
8c.quadraticCurveTo(450, 250, 500, 300)
9c.lineTo(500, 400)
10c.stroke()
11
12c.beginPath()
13c.moveTo(800, 400);
14c.bezierCurveTo(800, 150, 1200, 700, 1200, 400);
15c.stroke()
文本
文本功能非常类似于直角,有几个类似CSS的样式选项:
fillText(text, x, y)strokeText(text, x, y)font:采用在像素和字体组中大小的字符串;如60px Times-New-Roman。
1[label canvas.js]
2c.font = '60px Times-New-Roman'
3c.fillText("Hello World", 600, 500)
4c.strokeText('Hello World', 1200, 500)
结论
虽然仍然有大量可以用HTML画布做,如动画和交互性,但希望这是对其某些可能性的一个很好的首次介绍。