html 画布 canvas

一、 Canvas 的定义


<canvas>是 HTML5 的新标签,它本身并没有什么,但是它却把一个绘图API展现给了JavaScript,以便于我们绘制各种图像,所以我们习惯称呼 <canvas> 为画布。


1、Canvas标签结构


1
<canvas id="myCanvas" width="200" height="200"></canvas>

canvas标签元素自身有两个属性:width 和 height。
除此之外,canvas还拥有所有主要的 HTML5 属性,例如 class、id、name等。

注:标签自带的 width 和 height 是画布内部 坐标 的宽高大小(单位不一定是px),而类名里设的宽高则是画布的宽高,建议在类名里面设的宽高和canvas标签内的宽高一致。


2、Canvas在JavaScript的定义


每个画布都必须要有一个context(上下文)的定义,如下面代码所示;

1
2
3
4
5
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById('myCanvas');
var con=myCanvas.getContext('2d'); // 定义画布
</script>

就目前的情况来说,官方规范只承认一个2D环境:
var con=myCanvas.getContext('2d');
在标示画布并指明了他的上下文后,就可以开始画图了。


3、Canvas 坐标轴


要在 <canvas> 中绘图,首先要了解它的坐标轴;
它和我们在小学所学的坐标轴Y轴是相反的;
假设 canvas 画布的大小为宽100px*高100px,那么其坐标如下图:

canvas坐标轴


二、 绘制 Canvas


1、Canvas 画一条直线


beginPath() 开始一个路径,moveTo(x0,y0) 是起点,lineTo(x1,y1) 是终点

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
var mycanvas=document.getElementById('mycanvas');
var con=mycanvas.getContext('2d'); //画布
con.beginPath(); // 开始一个路径
con.moveTo(10,10); // 确定绘制图像的起点
con.lineTo(30,10); // 线划到 (30,10)
con.lineWidth = 2; // 线的宽度
con.strokeStyle = "#0f0"; // 描边的颜色,#0f0是亮绿色
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
</script>

2、Canvas 边线和区域


strokeStyle 是边线的颜色, stroke() 是画出边线;
fillStyle 是边线的颜色, fill() 是画出边线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
var mycanvas=document.getElementById('mycanvas');
var con=mycanvas.getContext('2d'); //画布
con.beginPath(); // 开始一个路径
con.moveTo(10,10); // 确定绘制图像的起点
con.lineTo(30,10); // 线划到 (30,10)
con.lineTo(30,30); // 线划到 (30,30)
con.lineWidth = 1; // 线的宽度
con.fillStyle = "red"; // 在区域里的内容颜色
con.strokeStyle = "#0f0"; // 描边的颜色,#0f0是亮绿色
con.fill(); // 填充区域的颜色
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
</script>

所画内容,如图所示:

canvas坐标轴


3、Canvas 画矩形


绘制矩形:
rect(x,y,w,h):x、y 是起始坐标,w、y 为矩形的宽高;

当然,还有快速绘图的方法:
fillRect(x,y,w,h)、strokeRect(x,y,w,h) 其参数同上,前者直接填充区域,后者直接填充线的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
var mycanvas=document.getElementById('mycanvas');
var con=mycanvas.getContext('2d'); //画布
con.beginPath(); // 开始一个路径
con.rect(10,10,30,20); //画矩形
con.lineWidth = 1; // 线的宽度
con.fillStyle = "red"; // 在区域里的内容颜色
con.strokeStyle = "#0f0"; // 描边的颜色,#0f0是亮绿色
con.fill(); // 填充区域的颜色
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
</script>

4、Canvas 画圆形


绘制圆形
arc(x,y,r,sa,ea,true/false)
x,y 为圆心坐标,r为半径;
sa、ea 分别为 起始角度结束角度 ,既:Math.PI*N ( Math.PI就是π,Math.PI*2 就是2π,就是一圈,360度);
最后一个参数为 true 时,逆时针画圆;
为 false 时,顺时针画圆。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
var mycanvas=document.getElementById('mycanvas');
var con=mycanvas.getContext('2d'); //画布
con.beginPath(); // 开始一个路径
con.arc(50,50,10,0,Math.PI*2,false); //画圆形
con.lineWidth = 1; // 线的宽度
con.fillStyle = "red"; // 在区域里的内容颜色
con.strokeStyle = "#0f0"; // 描边的颜色,#0f0是亮绿色
con.fill(); // 填充区域的颜色
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
</script>

5、Canvas 画曲线


canvas 画曲线,我们叫它贝塞尔曲线 (bezier);

他有一个控制点的说法,就是我们所画曲线中,在起点(或终点)切线上的任意一个点
我们先用简单的二次贝塞尔试验一下;

二次贝赛尔曲线:
在二次贝塞尔曲线中,起点和终点的控制点为同一个点;
所以,控制点为,起点和终点切线的交点

quadraticCurveTo(qx,qy,x,y)
qx,qy 为控制点坐标
x,y 为终点坐标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
.mycanvas{
display: block;
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
<canvas id="myCanvas" class="mycanvas" width="1000" height="500">
<p>你的浏览器不支持canvas</p>
</canvas>
</body>
</html>
<script type="text/javascript">
var myCanvas=document.getElementById('myCanvas');
var con=myCanvas.getContext('2d'); //画布
/* 切线示意图 */
con.beginPath(); // 开始一个路径
con.moveTo(100,100); // 确定绘制图像的起点
con.lineTo(300,300); // 线划到 (30,10)
con.lineTo(500,100); // 线划到 (30,10)
con.strokeStyle = "#000"; // 描边的颜色
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
/* 曲线示意图 */
con.beginPath(); // 开始一个路径
con.moveTo(100,100); // 确定绘制图像的起点
con.quadraticCurveTo(300,300,500,100)
con.lineWidth = 1; // 线的宽度
con.strokeStyle = "#f00"; // 描边的颜色,红线
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
</script>

所画内容,如图所示:

canvas坐标轴


三次贝赛尔曲线:
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1x 为控制点1的坐标;
cp2x,cp2x 为控制点2的坐标;
x,y 为终点坐标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
.mycanvas{
display: block;
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
<canvas id="myCanvas" class="mycanvas" width="1000" height="500">
<p>你的浏览器不支持canvas</p>
</canvas>
</body>
</html>
<script type="text/javascript">
var myCanvas=document.getElementById('myCanvas');
var con=myCanvas.getContext('2d'); //画布
/* 切线示意图 */
con.beginPath(); // 开始一个路径
con.moveTo(100,100); // 确定绘制图像的起点
con.lineTo(200,200); // 线划到 (30,10)
con.lineTo(400,250); // 线划到 (30,10)
con.lineTo(500,100); // 线划到 (30,10)
con.strokeStyle = "#000"; // 描边的颜色
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
/* 曲线示意图 */
con.beginPath(); // 开始一个路径
con.moveTo(100,100); // 确定绘制图像的起点
con.bezierCurveTo(200,200,400,250,500,100)
con.lineWidth = 1; // 线的宽度
con.strokeStyle = "#f00"; // 描边的颜色,红线
con.stroke(); // 填充线的颜色
con.closePath(); // 结束一个路径
</script>

所画内容,如图所示:

canvas坐标轴


6、Canvas 写字


绘制文字
font 设置文字属性
textAlign、textBaseline 是水平、垂直对齐方式(相对于起点)
strokeText(text,x,y,maxWidth):描线写文字
fillText(text,x,y,maxWidth):填充满的写文字

text 写的文字;
x,y 起始坐标;
maxWidth 这段文字的总宽度;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
var mycanvas=document.getElementById('mycanvas');
var con=mycanvas.getContext('2d'); //画布
con.beginPath(); // 开始一个路径
con.font = "50px 微软雅黑"; // 字体样式
con.textAlign = "left"; // 水平对齐方式
con.textBaseline = "top"; // 垂直对齐方式
con.strokeText("哈哈哈哈",100,100,200);
con.textAlign = "center"; // 水平对齐方式
con.fillText("哈哈哈哈",500,100,200);
con.closePath(); // 结束一个路径
</script>

所画内容,如图所示:

canvas坐标轴