canvas是定義在浏覽器上的畫布。它不僅僅是一個标簽元素更是一個程式設計工具是一套程式設計的接口。利用它可以開發出很多東西，比如動畫，遊戲，動态的圖表等富有變現力和感染力的應用。還可以開發出絢麗的3D動态效果。接下來我們一起學習！
一、 建立canvas
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>canvas基礎</title>
9 </head>
10
11 <body>
12 <canvas id='canvas' width='700' height='400' style="border: 1px solid #aaa;display:block;margin:50px auto "></canvas>
13 </body>
14
15 </html> 看一下現在的效果:
除了上述代碼那樣指定canvas的寬高，還可以在js中這樣指定:
1 var canvas = document.getElementById('canvas');
2
3 canvas.width = 700;
4 canvas.height = 400; 這樣邊框内就是一個畫布了，接下來我們就可以在這畫布裡進行繪制了。
二 、 畫一條線段
1 <script>
2 window.onload = function () {
3 var canvas = document.getElementById('canvas'); //擷取canvas
4
5 canvas.width = 700; //設定canvas的寬度
6 canvas.height = 400; //設定canvas的高度
7
8 if (canvas.getContext('2d')) {
9
10 var context = canvas.getContext('2d'); //擷取繪圖的上下文環境
11
12 context.moveTo(100, 100) //畫筆的起始位置
13 context.lineTo(500, 300) //畫筆的結束位置
14 context.lineWidth = 5; //線的寬度
15 context.strokeStyle = '#005588' //線的顔色
16 context.stroke() //開始繪制
17
18 } else {
19 alert('您的浏覽器不支援canvas,請更換浏覽器嘗試~')
20 }
21 }
22 </script> 看一下效果圖:
三 、 畫一個三角形并着色
1 <script>
2 window.onload = function () {
3 var canvas = document.getElementById('canvas'); //擷取canvas
4
5 canvas.width = 700; //設定canvas的寬度
6 canvas.height = 400; //設定canvas的高度
7
8 if (canvas.getContext('2d')) {
9
10 var context = canvas.getContext('2d'); //擷取繪圖的上下文環境
11
12 context.moveTo(100, 100) //畫筆的起始位置
13 context.lineTo(500, 300) //畫筆的結束位置
14 context.lineTo(100, 300) //畫筆的結束位置
15 context.lineTo(100, 100) //畫筆的結束位置
16
17 context.fillStyle='rgb(2,100,30)' //設定填充顔色
18 context.fill() //開始進行着色
19
20 context.lineWidth = 5; //線的寬度
21 context.strokeStyle = 'red' //線的顔色
22 context.stroke() //開始繪制
23
24 } else {
25 alert('您的浏覽器不支援canvas,請更換浏覽器嘗試~')
26 }
27 }
28 </script> 效果圖:
四 、 繪制兩個圖形
1 <script>
2 window.onload = function () {
3 var canvas = document.getElementById('canvas'); //擷取canvas
4
5 canvas.width = 700; //設定canvas的寬度
6 canvas.height = 400; //設定canvas的高度
7
8 if (canvas.getContext('2d')) {
9
10 var context = canvas.getContext('2d'); //擷取繪圖的上下文環境
11
12 context.beginPath() //開始一個新的路徑繪制
13
14 context.moveTo(100, 100) //畫筆的起始位置
15 context.lineTo(500, 300) //畫筆的結束位置
16 context.lineTo(100, 300) //畫筆的結束位置
17 context.lineTo(100, 100) //畫筆的結束位置
18
19 context.closePath() //結束一個路徑的繪制
20
21 context.fillStyle='rgb(2,100,30)' //設定填充顔色
22 context.fill() //開始進行着色
23
24 context.lineWidth = 5; //線的寬度
25 context.strokeStyle = 'red' //線的顔色
26 context.stroke() //開始繪制
27
28 context.beginPath() //開始一個新的路徑繪制
29
30 context.moveTo(100,50) //畫筆的起始位置
31 context.lineTo(600,300) //畫筆的結束位置
32
33 context.closePath() //結束一個路徑的繪制
34
35 context.lineWidth = 3; //線的寬度
36 context.strokeStyle = 'yellow' //線的顔色
37 context.stroke() //開始繪制
38
39
40 } else {
41 alert('您的浏覽器不支援canvas,請更換浏覽器嘗試~')
42 }
43 }
44 </script> 效果圖:
五 、 繪制一個七巧闆
1 <script>
2 var tangram = [
3 { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: '#caff67' },
4 { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: '#67becf' },
5 { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: '#ef3d61' },
6 { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: '#f9f51a' },
7 { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: '#a594c0' },
8 { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: '#fa8ecc' },
9 { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: '#f6ca29' },
10 ]
11 window.onload = function () {
12 var canvas = document.getElementById('canvas'); //擷取canvas
13
14 canvas.width = 800; //設定canvas的寬度
15 canvas.height = 800; //設定canvas的高度
16
17 if (canvas.getContext('2d')) {
18
19 var context = canvas.getContext('2d'); //擷取繪圖的上下文環境
20
21 for (var i = 0; i < tangram.length; i++) {
22 draw(tangram[i], context)
23 }
24
25
26 } else {
27 alert('您的浏覽器不支援canvas,請更換浏覽器嘗試~')
28 }
29 }
30
31 function draw(piece, context) {
32 context.beginPath();
33 context.moveTo(piece.p[0].x, piece.p[0].y);
34 for (var i = 1; i < piece.p.length; i++) {
35 context.lineTo(piece.p[i].x, piece.p[i].y)
36 }
37 context.closePath();
38
39 context.fillStyle = piece.color;
40 context.fill();
41
42 context.strokeStyle = 'black';
43 context.lineWidth = 3;
44 context.stroke();
45
46 }
47 </script> 效果圖:
六 、 繪制一段弧
1 <script>
2 window.onload = function () {
3 var canvas = document.getElementById('canvas'); //擷取canvas
4
5 canvas.width = 600; //設定canvas的寬度
6 canvas.height = 600; //設定canvas的高度
7
8 if (canvas.getContext('2d')) {
9
10 var context = canvas.getContext('2d'); //擷取繪圖的上下文環境
11
12 context.lineWidth = 5;
13 context.strokeStyle = '#005588';
14 context.arc(300, 300, 200, 0, 1.5 * Math.PI);
15 context.stroke();
16
17 } else {
18 alert('您的浏覽器不支援canvas,請更換浏覽器嘗試~')
19 }
20 }
21 </script> context.arc各參數的含義:
1 context.arc(
2 centerx , //圓心的x軸坐标位置
3 centery, //圓心的y軸坐标位置
4 radius, //圓弧半徑的值
5 startingAngle, //以哪個弧度制開始
6 endingAngle, //在哪個弧度制結束
7 anticlockwise=false //順時針方向繪制,為true則逆時針。預設為順時針。
8 ) 效果圖:
改為逆時針的話，在context.arc裡面添加參數true
context.arc(300, 300, 200, 0, 1.5 * Math.PI,true); 效果圖:
七 、 繪制多段弧 和 着色
1 <script>
2 window.onload = function () {
3 var canvas = document.getElementById('canvas'); //擷取canvas
4
5 canvas.width = 1000; //設定canvas的寬度
6 canvas.height = 600; //設定canvas的高度
7
8 if (canvas.getContext('2d')) {
9
10 var context = canvas.getContext('2d'); //擷取繪圖的上下文環境
11
12 context.lineWidth = 5;
13 context.strokeStyle = '#005588';
14
15 for (var i = 0; i < 10; i++) {
16 context.beginPath();
17 context.arc(50 + i * 100, 100, 40, 0, 2 * Math.PI * (i + 1) / 10);
18 context.closePath();
19 context.stroke();
20 }
21
22 for (var i = 0; i < 10; i++) {
23 context.beginPath();
24 context.arc(50 + i * 100, 300, 40, 0, 2 * Math.PI * (i + 1) / 10);
25
26 context.stroke();
27 }
28
29 context.fillStyle = '#005588'
30 for (var i = 0; i < 10; i++) {
31 context.beginPath()
32 context.arc(50 + i * 100, 500, 40, 0, 2 * Math.PI * (i + 1) / 10);
33 context.closePath()
34
35 context.fill()
36 }
37
38 } else {
39 alert('您的浏覽器不支援canvas,請更換浏覽器嘗試~')
40 }
41 }
42 </script> 效果圖:
可以看出繪制多個弧也是使用beginPath()和closePath()。但是繪制出來的弧自動的把首尾連接配接起來了，成了一個封閉的弧。這是因為closePath()的原因，如果想隻是展示不封閉的弧，隻需要把context.closePath()這段代碼去掉就行。beginPath()和closePath()并不一定成對出現。填充的時候，有closePath()和沒有closePath()效果是一樣的。