canvas的基礎入門

時間 2019-12-12

標籤 canvas 基礎入門简体版

原文原文鏈接

canvas是定義在瀏覽器上的畫布。它不單單是一個標籤元素更是一個編程工具是一套編程的接口。利用它能夠開發出不少東西，好比動畫，遊戲，動態的圖表等富有變現力和感染力的應用。還能夠開發出絢麗的3D動態效果。接下來咱們一塊兒學習！html

1、建立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

除了上述代碼那樣指定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>

看一下效果圖:動畫

三、畫一個三角形並着色ui

 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>

效果圖:spa

四、繪製兩個圖形3d

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。