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()效果是一樣的。