HTML5 —— 初识 Canvas 画布

# 系列文章目录

---

@[TOC](文章目录)

---
## Canvas 画布
`<canvas>` 元素用于图形的绘制，通过脚本（通常是JavaScript）来完成

### 绘制一个矩形
注：
1. **getContext("2d")** 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
2. fillStyle 可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑***r /> 3. fillRect(x, y, width, height) 方法定义了矩形当前的填充方式
```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
      <script>
      let c = document.querySelector('#myCanvas')
      let ctx = c.getContext("2d")
      ctx.fillStyle = "#FF0000"
      ctx.fillRect(0, 0, 150, 75)
      </script>
    </body>
    </html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/1d9ad2165dcf4b9dbb0f1340d791adeb.png)
### 绘制一条线
注：
1. moveTo(x,y) 定义线条开始坐标
2. lineTo(x,y) 定义线条结束坐标
3. stroke() 方法来绘制线条

```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
      <script>
      let c = document.querySelector('#myCanvas')
      let ctx = c.getContext("2d")
      ctx.moveTo(0, 0)
      ctx.lineTo(200, 100)
      ctx.stroke()
      </script>
    </body>
    </html>
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/99a047416020418986fbba09ff1d08c7.png)
### 绘制一个圆
注：
1. beginPath() 方法开始一条路径，或重置当前的路径
2. arc() 方法创建弧/曲线（用于创建圆或部分圆）
3. stroke() 方法来绘制线条

```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
      <script>
      let c = document.querySelector('#myCanvas')
      let ctx = c.getContext("2d")
      ctx.beginPath()
      ctx.arc(95, 50, 40, 0, 2*Math.PI)
      ctx.stroke()
      </script>
    </body>
    </html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/6997cd494b43421a93d51fcfb6d83eaf.png)

4. ctx.stroke() 改为 ctx.fill()

![在这里插入图片描述](https://img-blog.csdnimg.cn/f0bd96c8c2c74ea9af17b6131d09b637.png)
### 绘制一个文本
注意：
1. font - 定义字体
2. fillText(text,x,y) - 在 canvas 上绘制实心的文本
3. strokeText(text,x,y) - 在 canvas 上绘制空心的文本

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
<script>
let c = document.querySelector('#myCanvas')
let ctx = c.getContext("2d")
ctx.font = "30px Arial"
ctx.fillText("Hello H5", 10, 50)
</script>
</body>
</html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/b7c19a76f0c048b88526e38f01e9a148.png)

4. **实心变空心**：把 ctx.fillText("Hello H5", 10, 50) 改为 ctx.strokeText("Hello H5", 10, 50)

![在这里插入图片描述](https://img-blog.csdnimg.cn/10d81b7db71e4e3f8aa47f690ac93d27.png)
### 绘制一个线性渐变
注意：
1. createLinearGradient(x,y,x1,y1) - 创建线条渐变
2. addColorStop() 方法指定颜色停止，参数使用坐标来描述，可以是0至1
3. 使用渐变，设置 fillStyle 或 strokeStyle 的值为渐变，然后绘制形状，如矩形，文本，或一条线。
```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
      <script>
      let c = document.querySelector('#myCanvas')
      let ctx = c.getContext("2d")
      // 创建渐变
      let grd = ctx.createLinearGradient(0, 0, 200, 0)
      grd.addColorStop(0, 'red')
      grd.addColorStop(1, 'white')
      // 填充渐变
      ctx.fillStyle = grd
      ctx.fillRect(10, 10, 180, 80)
      </script>
    </body>
    </html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/761b1c77577a4241949fa6cbbb8fd136.png)
### 绘制一个径向渐变
注：createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
<script>
let c = document.querySelector('#myCanvas')
let ctx = c.getContext("2d")
// 创建渐变
let grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// 填充渐变
ctx.fillStyle = grd
ctx.fillRect(10, 10, 150, 80)
</script>
</body>
</html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/820970d3a94f468fbafa3c89c89a2a09.png)

### 绘制一个图像
把一幅图像放置到画布上，使用方法：drawImage(image, x, y)

```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <img id="scream" src="xxx.jpg" width="220" height="277">
      <canvas id="myCanvas" width="250" height="300" style="border: 1px solid black"></canvas>
      <script>
      let c = document.querySelector('#myCanvas')
      let ctx = c.getContext("2d")
      let img = document.querySelector("#scream")

      img.onload = function() {
      ctx.drawImage(img, 10, 10)
      }
      </script>
    </body>
    </html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/96f0f67c95bb4c0b9dab9b2cf50fb606.png)

`不积跬步无以至千里不积小流无以成江海`

==点个关注不迷路，持续更新中==
#JavaScript#

HTML5 —— 初识 Canvas 画布

全站热榜

创作者周榜