HTML5 —— 初识 Canvas 画布

系列文章目录

文章目录

系列文章目录
- Canvas 画布

Canvas 画布

元素用于图形的绘制，通过脚本（通常是JavaScript）来完成

绘制一个矩形

注：

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
fillStyle 可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）
fillRect(x, y, width, height) 方法定义了矩形当前的填充方式

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

绘制一条线

注：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke() 方法来绘制线条

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

绘制一个圆

注：

beginPath() 方法开始一条路径，或重置当前的路径
arc() 方法创建弧/曲线（用于创建圆或部分圆）
stroke() 方法来绘制线条

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

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

在这里插入图片描述

绘制一个文本

注意：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

    <!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

实心变空心：把 ctx.fillText(“Hello H5”, 10, 50) 改为 ctx.strokeText(“Hello H5”, 10, 50)

在这里插入图片描述

绘制一个线性渐变

注意：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
addColorStop() 方法指定颜色停止，参数使用坐标来描述，可以是0至1
使用渐变，设置 fillStyle 或 strokeStyle 的值为渐变，然后绘制形状，如矩形，文本，或一条线。

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

绘制一个径向渐变

注：createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

    <!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

绘制一个图像

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

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

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

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

相关阅读:
学习嵌入式的第十六天----结构体共用体
 CAP项目集成带身份和证书验证的MongoDB
uniapp：配置动态接口域名，根据图片访问速度，选择最快的接口
 PBR系列-物理材质（上）
Java集合（三）
2023年软件开发领域的发展趋势
 苹果宣布停产iPod touch，售完即止；小米汽车暂无计划在上海建厂；Go也能在浏览器上运行了|极客头条
 第二章：初始Ajax
深入理解参数-@Param和对象作为参数重要
 2023国赛高教社杯数学建模C题思路分析
原文地址：https://blog.csdn.net/qq_45902692/article/details/126024350