Canvas绘制简单图形
一、绘制文字
fillText(text, x, y[, maxWidth]) -- 填充方式
strokeText(text, x, y[, maxWidth]) -- 描边方式
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制文字</title>
6 </head>
7 <body>
8 <canvas id="addText" height="70px" width="550px"></canvas>
9 <div>
10 <p>
11 古时候，楚国有一家人，祭完祖宗之后，准备将祭祀用的一壶酒，赏给帮忙办事的人员喝。参加的人很多，这壶酒如果大家都喝是不够的，若是让一个人喝，那能喝得有余。这一壶酒到底怎么分呢？<br>
12 大家都安静下来，这时有人建议：每个人在地上画一条蛇，谁画得快又画得好，就把这壶酒归他喝。大家都认为这个方法好，都同意这样做。于是，在地上画起蛇来。<br>
13 有个人画得很快，一转眼最先画好了，他就端起酒壶要喝酒。但是他回 头看看别人，还都没有画好呢。心里想：他们画得真慢。又想显示自己的本领， 他洋洋得意地说： “你们画得好慢啊！我再给蛇画几只脚也不算晚呢！”于是，他便左手提着酒壶，右手拿了一根树枝，给蛇画起脚来。<br>
14 正在他一边画着脚，一边说话的时候，另外一个人已经画好了。那个人 马上把酒壶从他手里夺过去，说："你见过蛇吗？蛇是没有脚的，你为什么要给它添上脚呢？所以第一个画好蛇的人不是你，而是我了！"<br>
15 那个人说罢就仰起头来，咕咚咕咚把酒喝下去了。
16 </p>
17 </div>
18
19 <script>
20 window.addEventListener("load", function (){
21 var canvas = document.getElementById('addText');
22 if (canvas && canvas.getContext) {
23 var context = canvas.getContext("2d");
24 context.fillStyle = "#00f";
25 context.font = "italic 15px sans-serif";
26 /*
27 * textBaseline -- 设置文字相对于起点的位置
28 * 取值包括 top hanging middle alphabetic ideographic(默认值) bottom
29 */
30 context.textBaseline = "bottom";
31 /*
32 * textAlign -- 设置文字的对齐方式
33 * 取值包括 start(默认值) end left right center
34 */
35 context.textAlign = "start";
36 /*
37 * context.fillText(text, x, y[, maxwidth])
38 * 表示以填充的方式描绘文字
39 */
40 context.fillText("(比喻做了多余的事，反而有害无利，徒劳无功。)", 160, 50);
41
42 context.strokeStyle = "#faa"; //设置颜色
43 context.font = "bold 30px sans-serif";
44 /*
45 * context.strokeText(text, x, y[, maxwidth])
46 * 表示已描边的方式绘制文字
47 */
48 context.strokeText("画蛇添足", 30, 50);
49 }
50 }, true);
51 </script>
52 </body>
53 </html>
二、绘制矩形
fillRect(x, y, width, height) -- 实心矩形
strokeRect(x, y, width, height) -- 空心矩形
clearRect(x, y, width, height) -- 清除指定区域的像素
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制矩形</title>
6 <style>
7 canvas{
8 float: left;
9 margin-right: 30px;
10 }
11 </style>
12 </head>
13 <body>
14 <canvas id="rect1" height="250px" width="250px"></canvas>
15
16 <canvas id="rect2" height="250px" width="250px"></canvas>
17
18 <canvas id="rect3" height="250px" width="250px"></canvas>
19
20 <script>
21 window.addEventListener("load", function(){
22 var canvas = document.getElementById('rect1');
23 if (canvas && canvas.getContext) {
24 var context = canvas.getContext("2d");
25 // context.fillStyle = "#fbb";
26 context.strokeStyle = "#fbb";
27 context.lineWidth = 1;
28 // context.fillRect(25,65,200,120);
29 context.strokeRect(25,65,200,120)
30 }
31 }, true);
32 window.addEventListener("load", function(){
33 var canvas = document.getElementById('rect2');
34 if (canvas && canvas.getContext) {
35 var context = canvas.getContext("2d");
36 context.fillStyle = "#fbb";
37 context.strokeStyle = "#666";
38 context.lineWidth = 1;
39 /*
40 * context.strokeRect(x, y, width, height) -- 绘制实心矩形
41 * 坐标原点为画布左上角
42 */
43 context.fillRect(25,25,200,200);
44 /*
45 * context.strokeRect(x, y, width, height) -- 绘制空心矩形
46 * 坐标原点为画布左上角
47 */
48 context.strokeRect(25,25,200,200)
49 }
50 }, true);
51 window.addEventListener("load", function(){
52 var canvas = document.getElementById('rect3');
53 if (canvas && canvas.getContext) {
54 var context = canvas.getContext("2d");
55 context.fillStyle = "#fbb";
56 context.strokeStyle = "#666";
57 context.lineWidth = 1;
58 context.fillRect(65,25,120,200);
59 // context.strokeRect(65,25,120,200);
60 /*
61 * context.clearRect(x, y, width, height) -- 清除指定区域的像素
62 * 坐标原点为画布左上角
63 */
64 context.clearRect(65,65,50,50);
65 }
66 }, true);
67 </script>
68 </body>
69 </html>
三、绘制线段（三角形）
步骤：
1、beginPath() -- 创建路径
2、moveTo(x, y) -- 将当前位置移到新目标坐标，并作为要绘制线段的起点坐标
3、lineTo(x, y) -- 线段指定目标坐标(线段终点坐标)
4、stroke() -- 绘制图形边框
5、fill() -- 填充图形（依情况自选）
6、closePath() -- 关闭路径(可选)
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制直线</title>
6 <style>
7 canvas{
8 float: left;
9 margin-right: 30px;
10 }
11 </style>
12 </head>
13 <body>
14 <canvas id="line1" height="200px" width="170px"></canvas>
15
16 <canvas id="line2" height="200px" width="250px"></canvas>
17
18 <canvas id="line3" height="200px" width="250px"></canvas>
19
20 <script>
21 window.addEventListener("load", function(){
22 var canvas = document.getElementById('line1');
23 if (canvas && canvas.getContext) {
24 var context = canvas.getContext("2d");
25 /*
26 * 绘制直线步骤：
27 * 1、创建路径 -- beginPath()
28 * 2、设置起始点坐标 -- moveTo(x,y)
29 * 3、设置目标点坐标 -- lineTo(x,y)
30 * 4、绘制图形的边框 -- 调用stroke()函数绘制图形，若图形不是一条直线，可选择使用fill()填充
31 * 5、填充 -- fill() 可选,用于可填充图形
32 * 6、关闭路径 -- closePath() 可选
33 */
34 context.beginPath(); //开始创建路径
35 context.lineWidth = 1;
36 context.moveTo(20,100); //起始点坐标
37 context.lineTo(150,100);//目标点坐标
38 context.stroke(); //调用stroke函数绘制直线
39 context.closePath(); //关闭路径
40 }
41 }, true);
42 window.addEventListener("load", function(){
43 var canvas = document.getElementById('line2');
44 if (canvas && canvas.getContext) {
45 var context = canvas.getContext("2d");
46 context.beginPath(); //开始创建路径
47 context.lineWidth = 1;
48 context.moveTo(160,50); //起始点坐标
49 context.lineTo(50,100); //目标点坐标
50 context.lineTo(160,185);//目标点坐标
51 context.stroke(); //调用stroke函数绘制直线
52 }
53 }, true);
54 window.addEventListener("load", function(){
55 var canvas = document.getElementById('line3');
56 if (canvas && canvas.getContext) {
57 var context = canvas.getContext("2d");
58 context.beginPath(); //开始创建路径
59 context.lineWidth = 1;
60 context.moveTo(160,50); //起始点坐标
61 context.lineTo(50,100); //目标点坐标
62 context.lineTo(160,185);//目标点坐标
63 context.fill(); //调用fill()函数绘制图形
64 }
65 }, true);
66 </script>
67 </body>
68 </html>
四、绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
各参数含义：
x -- 绘制圆形的起点横坐标
y -- 绘制圆形的起点纵坐标
radius -- 绘制圆形半径
startAngle -- 开始角度，取值为 Math.PI * n，Math.PI 表示180度
endAngle -- 结束角度，取值为 Math.PI * n，Math.PI 表示180度
anticlockwise -- 是否按照顺时针方向进行绘制，取值为 true 和 false
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制圆形</title>
6 <style>
7 canvas{
8 float: left;
9 margin-right: 30px;
10 }
11 </style>
12 </head>
13 <body>
14 <canvas id="circle1" height="180" width="190"></canvas>
15
16 <canvas id="circle2" height="180" width="190"></canvas>
17
18 <canvas id="circle3" height="180" width="190"></canvas>
19
20 <canvas id="circle4" height="180" width="190"></canvas>
21
22 <script>
23
24 function GetContext(id){
25 var canvas = document.getElementById(id);
26 if (canvas && canvas.getContext) {
27 var context = canvas.getContext("2d");
28 return context;
29 }
30 }
31
32 window.addEventListener("load", function(){
33 var context = GetContext("circle1");
34 context.beginPath();
35 /*
36 * arc(x,y,radius,startAngle,endAngle,anticlockwise)
37 * x, y 表示绘制圆形起点的横纵坐标
38 * anticlockwise 表示是否按照顺时针方向进行绘制，取值为 true 和 false
39 * Math.PI 表示角度为180度
40 */
41 context.arc(80, 80, 60, Math.PI, Math.PI * 2, true);
42 context.stroke();
43 }, true);
44 window.addEventListener("load", function(){
45 var context = GetContext("circle2");
46 context.beginPath();
47 context.arc(80, 80, 60, 0, Math.PI * 2 / 4, true);
48 context.fill();
49 }, true);
50 window.addEventListener("load", function(){
51 var context = GetContext("circle3");
52 context.beginPath();
53 context.arc(80, 80, 60, Math.PI, (Math.PI * 2 / 4) * 3, false);
54 context.fill();
55 }, true);
56 window.addEventListener("load", function(){
57 var context = GetContext("circle4");
58 context.beginPath();
59 context.arc(80, 80, 60, 0, Math.PI * 2, true);
60 context.stroke();
61 }, true);
62 </script>
63 </body>
64 </html>
五、绘制渐变图形
创建渐变图形的步骤：
1、创建线性或径向渐变对象
2、为渐变对象设置颜色
3、在上下文对象上为填充样式或描边样式设置渐变
（一）、线性渐变
createLinearGradient(xStart, yStart, xEnd, yEnd) -- 创建渐变对象
addColorStop(offset, color) -- 设置渐变颜色（参数 offset 表示渐变偏移量，取值为 0~1）
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制线性渐变</title>
6 </head>
7 <body>
8 <canvas width="320" height="150" id="canvas"></canvas>
9
10 <div><canvas id="title" height="30"></canvas></div>
11
12 <div><canvas id="context" height="115" width="378"></canvas></div>
13
14 <script>
15
16 function GetContext(id){
17 var canvas = document.getElementById(id);
18 if (canvas && canvas.getContext) {
19 var context = canvas.getContext("2d");
20 return context;
21 }
22 }
23
24 window.addEventListener("load", function(){
25 var ctx = GetContext("canvas");
26 /*
27 * context.createLinearGradient(xStart, yStart, xEnd, yEnd)
28 * 创建渐变对象
29 */
30 var lingrad1 = ctx.createLinearGradient(0, 0, 0, 150);
31 /*
32 * addColorStop(offset, color)
33 * 设置渐变颜色
34 * offset 表示所设定的颜色离开渐变起始点的偏移量，取值为 0-1
35 * 0 表示渐变起始点的偏移量
36 * 1 表示渐变结束点的偏移量
37 */
38 lingrad1.addColorStop(0, '#00abeb');
39 lingrad1.addColorStop(0.5, '#fff');
40 lingrad1.addColorStop(0.5, '#26c000');
41 lingrad1.addColorStop(1, '#fff');
42
43 var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
44 lingrad2.addColorStop(0.5, '#000');
45 lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
46
47 ctx.fillStyle = lingrad1;
48 ctx.strokeStyle = lingrad2;
49
50 ctx.fillRect(10, 10, 300, 130);
51 ctx.strokeRect(50, 50, 210, 210);
52 });
53
54 window.addEventListener("load", function(){
55 var ctx = GetContext("title");
56 ctx.font = "italic 15px sans-serif";
57 ctx.strokeText("绘制线性渐变", 90, 20);
58 });
59
60 window.addEventListener("load", function(){
61 var ctx = GetContext("context");
62 ctx.font = "italic 15px sans-serif";
63 ctx.fillText("本案例实现线性渐变的功能，主要使用到了 Linear", 15, 20);
64 ctx.fillText("rGradient 对象的 addColorStop()函数、context对象的", 0, 40);
65 ctx.fillText("fillStyle 和 StrokeStyle属性及 fillRect()函数和st", 0, 60);
66 ctx.fillText("rokeRect()函数", 0, 80);
67 });
68 </script>
69 </body>
70 </html>
（二）、径向渐变
createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) -- 创建渐变对象
addColorStop(offset, color) -- 设置渐变颜色（参数 offset 表示渐变偏移量，取值为 0~1）
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制径向渐变</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="500" height="250" style="border: 1px solid #f00;"></canvas>
9
10 <script>
11 window.addEventListener("load", function(){
12 var canvas = document.getElementById('canvas');
13 var ctx = canvas.getContext("2d");
14
15 /*
16 * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
17 * 创建径向渐变对象
18 * 参数分别表示 开始圆的圆心横纵坐标，开始圆的半径，结束圆的圆心横纵坐标，结束圆的半径
19 */
20 var g1 = ctx.createRadialGradient(400, 0, 0, 400, 0, 400);
21 g1.addColorStop(0.1, "rgb(255, 255, 0)");
22 g1.addColorStop(0.3, "rgb(0, 255, 255)");
23 g1.addColorStop(0.5, "rgb(255, 0, 255)");
24 ctx.fillStyle = g1;
25 ctx.fillRect(0, 0, 500, 300);
26
27 // var n = 0;
28 var g2 = ctx.createRadialGradient(250, 250, 0, 250, 250, 300);
29 g2.addColorStop(0.1, "rgba(43, 255, 243, 0.3)");
30 g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)");
31 g2.addColorStop(1, "rgba(0, 0, 255, 0.8)");
32
33 for (var i = 0; i < 10; i++) {
34 ctx.beginPath();
35 ctx.fillStyle = g2;
36 ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI, true);
37 ctx.closePath();
38 ctx.fill();
39 }
40 });
41 </script>
42 </body>
43 </html>
六、为图形绘制阴影
shadowOffsetX -- 阴影水平方向偏移量，默认值为1
shadowOffsetY -- 阴影垂直方向偏移量，默认值为1
shadowBlur -- 阴影模糊范围，取值为 0~10，默认值为1
shadowolor -- 阴影颜色， 默认为全透明黑色
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制阴影</title>
6 </head>
7 <body onload="PicShadow(), TxtShadow()">
8 <canvas width="300" height="220" id="canvas1"></canvas>
9 <canvas width="300" height="220" id="canvas2"></canvas>
10
11 <script>
12 function PicShadow(){
13 var canvas = document.getElementById('canvas1');
14 var ctx = canvas.getContext("2d");
15 ctx.shadowOffsetX = 15;
16 ctx.shadowOffsetY = 15;
17 ctx.shadowBlur = 10;
18 ctx.shadowColor = "rgba(100, 200, 100, 0.5)";
19 ctx.fillStyle = "#bbf";
20 ctx.arc(150, 100, 80, 0, Math.PI * 2, true);
21 ctx.fill();
22 }
23
24 function TxtShadow(){
25 var canvas = document.getElementById('canvas2');
26 var ctx = canvas.getContext("2d");
27 ctx.shadowOffsetX = -5;
28 ctx.shadowOffsetY = -5;
29 ctx.shadowBlur = 1;
30 ctx.shadowColor = "rgba(255, 125, 255, 0.5)";
31 ctx.strokeStyle = "#bbf";
32 ctx.font = "italic 25px sans-serif";
33 ctx.strokeText("实现文字和图形阴影", 30, 100);
34 ctx.stroke();
35 }
36 </script>
37 </body>
38 </html>
七、绘制变形图形
（一）、保存和回复状态以及输出图像
save() -- 保存
restore() -- 恢复状态
注意： save方法用于临时保存画布坐标系统的状态；
restore方法可以用来恢复save之后设置的状态即回到save之前的状态；
save和restore 方法必须是配对使用的；
restore方法前必须有save方法，不然会报Underflow in restore错误；
restore方法的调用只影响restore之后绘制的内容
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制变形图形1 -- 保存和恢复状态</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="250" height="250" style="margin-left: 100px;"></canvas>
9
10 <script>
11 window.addEventListener("load", function(){
12 var ctx = document.getElementById('canvas').getContext("2d");
13 ctx.fillStyle = "#fbb";
14 ctx.fillRect(0, 0, 250, 250);
15 ctx.save();
16 ctx.fillStyle = "#00f";
17 ctx.fillRect(15, 15, 220, 220);
18 ctx.save();
19 ctx.fillStyle = "#bbf";
20 ctx.globalAlpha = 0.5;
21 ctx.fillRect(30, 30, 190, 190);
22 ctx.restore();
23 ctx.fillRect(45, 45, 160, 160);
24 ctx.restore();
25 ctx.fillRect(60, 60, 130, 130);
26 /*
27 * save方法用于临时保存画布坐标系统的状态
28 * restore方法可以用来恢复save之后设置的状态即回到save之前的状态
29 * save和restore方法必须是配对使用的
30 * restore方法前必须有save方法，不然会报Underflow in restore错误
31 * restore方法的调用只影响restore之后绘制的内容
32 */
33 });
34 </script>
35 </body>
36 </html>
toDataURL(type) -- 输出图像
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制变形图形2 -- 输出图像</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="260" height="260" style="margin-left: 200px;"></canvas>
9 <input type="button" value="输出图像" onclick="javascript: showImg();">
10 <img id="img1" width="150" height="150">
11
12 <script>
13 function showImg(){
14 /*
15 * canvas.toDataURL(type)
16 * type 表示要输入的数据的MIME类型
17 */
18 var img1 = document.getElementById('canvas').toDataURL("images/png");
19 document.getElementById('img1').src = img1;
20 }
21
22 window.addEventListener("load", function(){
23 var canvas = document.getElementById('canvas');
24 if (canvas && canvas.getContext) {
25 var ctx = canvas.getContext("2d");
26 ctx.fillStyle = "#ffb";
27 ctx.beginPath();
28 ctx.rect(5, 5, 250, 250);
29 ctx.fill();
30 ctx.stroke();
31 ctx.arc(150, 150, 80, 0, Math.PI * 2 / 4, true);
32 ctx.stroke();
33 }
34 });
35 </script>
36 </body>
37 </html>
（二）、坐标变换
translate(x, y) -- 平移
scale(x, y) -- 缩放
rotate(angle) -- 旋转（旋转中心为坐标轴原点），angle 取值为 Math.PI/180*角度
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制变形图形3 -- 坐标变换</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="360" height="300" style="margin-left: 300px;"></canvas>
9
10 <script>
11
12 window.addEventListener("load", function(){
13 var ctx = document.getElementById('canvas').getContext("2d");
14 ctx.translate(130, 120);
15 for (var i = 1; i < 7; i++) {
16 ctx.save();
17 ctx.fillStyle = 'rgba(' + (30 * i) + ',' + (255 - 30 * i) + '255, 1)';
18 for (var j = 0; j < i * 7; j++) {
19 ctx.translate(1, 1);
20 ctx.rotate(Math.PI * 2 / (i * 7));
21 ctx.beginPath();
22 ctx.scale(1.02, 1.02);
23 ctx.arc(0, i * 12, 5, 0, Math.PI * 2, false);
24 ctx.fill();
25 }
26 ctx.restore();
27 }
28 });
29 /*
30 * 坐标变换函数
31 * translate(x, y) -- x 表示向右移动，y 表示向下移动
32 * scale(x, y) -- x 表示水平方向的放大倍数，y 表示垂直方向的放大倍数，取 0-1 之间的数则为缩小
33 * rotate(angle) -- angle 表示旋转的角度，旋转的中心点是坐标轴的原点，旋转是以顺时针方向进行的，
34 * 若参数设为负值，则表示逆时针
35 */
36 </script>
37 </body>
38 </html>
（三）、矩阵变换
transform(a, b, c, d, e, f)
各参数含义：
a -- 水平缩放
b -- 水平倾斜
c -- 垂直倾斜
d -- 垂直缩放
e -- 水平移动
f -- 垂直移动
实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制变形图形4 -- 矩阵变换</title>
6 </head>
7 <body>
8 <canvas id="diagonal" width="300" height="300" style="margin-left: 300px;"></canvas>
9
10 <script>
11
12 window.addEventListener("load", function(){
13 var canvas = document.getElementById('diagonal');
14 if (canvas && canvas.getContext) {
15 var ctx = canvas.getContext("2d");
16 ctx.transform(1, 0, 0, 1, 150, 150);
17 ctx.beginPath();
18 ctx.fillStyle = "rgba(255, 0, 0, 0.25)";
19 rad = 18 * Math.PI / 90;
20 for (var i = 0; i < 10; i++) {
21 ctx.fillRect(0, 0, 100, 100);
22 // 设置旋转效果
23 ctx.transform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0);
24 ctx.closePath();
25 }
26 }
27 });
28 /*
29 * 矩阵变换函数
30 * transform(a, b, c, d, e, f)
31 * 各参数意义
32 * a -- 水平缩放
33 * b -- 水平倾斜
34 * c -- 垂直倾斜
35 * d -- 垂直缩放
36 * e -- 水平移动
37 * f -- 垂直移动
38 * rotate(x, y) 使用 transform(a, b, c, d, e, f) 方法替换如下
39 * ctx.transform(
40 * Math.cos(angle*Math.PI/180),
41 * Math.sin(angle*Math.PI/180),
42 * -Math.sin(angle*Math.PI/180),
43 * Math.cos(angle*Math.PI/180),
44 * 0, 0);
45 * 或 ctx.transform(
46 * -Math.sin(angle*Math.PI/180),
47 * Math.cos(angle*Math.PI/180),
48 * Math.cos(angle*Math.PI/180),
49 * Math.sin(angle*Math.PI/180),
50 * 0, 0);
51 * setTransform(a, b, c, d, e, f) -- 重置矩阵
52 */
53 </script>
54 </body>
55 </html>
