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>