[js高手之路] html5 canvas系列教程 - 掌握畫直線圖形的常用API

我們接著上文[js高手之路] html5 canvas系列教程 - 認識canvas以及基本使用方法繼續.

一、直線的繪制

cxt.moveTo( x1, y1 )：將畫筆移動到x1, y1這個點

cxt.lineTo( x2, y2 )：將畫筆從起點開始畫直線，一直畫到終點坐標( x2, y2 )

cxt.stroke();用畫筆連線，moveTo,lineTo并不會產生實際的線條

x1,y1,x2,y2是點的坐標，canvas的坐標原點在canvas的左上角.

畫一根直線:

 1 <style>
 2     body {
 3         background:#000;
 4     }
 5     #canvas {
 6         background:white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function(){
11         var oCanvas = document.querySelector( "#canvas" ),
12             oGc = oCanvas.getContext( '2d' );
13         oGc.moveTo( 50, 50 );
14         oGc.lineTo( 250, 50 );
15         oGc.stroke();
16     }
17 </script>
18 </head>
19 <body>
20 <canvas id="canvas"></canvas>
21 </body>

如果把stroke注釋了，是不會出現線條的，stoke的作用就是用來將點連起來

通過2個實例來區分，moveTo與lineTo的區別

 1 <style>
 2     body {
 3         background:#000;
 4     }
 5     #canvas {
 6         background:white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function(){
11         var oCanvas = document.querySelector( "#canvas" ),
12             oGc = oCanvas.getContext( '2d' );
13         oGc.moveTo( 50, 50 );
14         oGc.lineTo( 250, 50 );
15         oGc.moveTo( 50, 200 );
16         oGc.lineTo( 250, 200 );
17         oGc.stroke();
18 
19         oGc.moveTo( 300, 50 );
20         oGc.lineTo( 500, 50 );
21         oGc.lineTo( 300, 200 );
22         oGc.lineTo( 500, 200 );
23         oGc.stroke();
24     }
25 </script>
26 </head>
27 <body>
28 <canvas id="canvas" width="600" height="400"></canvas>
29 </body>

左右兩邊的線形圖，代碼就一點區別，左邊圖形是第二個點用了lineTo, 第三個點用了moveTo, 右邊圖形第二個點用了lineTo，第三個點還是lineTo，從圖中你應該能感受到這兩個方法的區別吧？

?畫三角形

 1 <style>
 2     body {
 3         background:#000;
 4     }
 5     #canvas {
 6         background:white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function(){
11         var oCanvas = document.querySelector( "#canvas" ),
12             oGc = oCanvas.getContext( '2d' );
13 
14         oGc.moveTo( 50, 50 );
15         oGc.lineTo( 450, 50 ); 
16         oGc.lineTo( 450, 300 );
17         oGc.lineTo( 50, 50 );
18         oGc.stroke();
19     }
20 </script>
21 </head>
22 <body>
23 <canvas id="canvas" width="600" height="400"></canvas>
24 </body>

把上面的代碼，稍微修改下，就能畫出一個矩形了

 1 <style>
 2     body {
 3         background:#000;
 4     }
 5     #canvas {
 6         background:white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function(){
11         var oCanvas = document.querySelector( "#canvas" ),
12             oGc = oCanvas.getContext( '2d' );
13 
14         oGc.moveTo( 50, 50 );
15         oGc.lineTo( 450, 50 ); 
16         oGc.lineTo( 450, 300 );
17         oGc.lineTo( 50, 300 );
18         oGc.lineTo( 50, 50 );
19         oGc.stroke();
20     }
21 </script>
22 </head>
23 <body>
24 <canvas id="canvas" width="600" height="400"></canvas>
25 </body>

二，canvas提供了畫矩形的API

?通過線條我們也能拼接出一個矩形，但是代碼太多，每個點都要把握，顯得比較麻煩，canvas為我們提供了畫矩形的API，有兩種，一種是描邊矩形，一種是填充矩形.

cxt.strokeStyle = 屬性值

cxt.strokeRect( x, y, width, height )

strokeStyle后面的屬性是為了修飾線條的，主要包括( 顏色值，漸變色，圖案），顏色支持英文單詞，十六進制，RGB, RGBA格式的顏色設置.

strokeRect: x, y為矩形的左上角坐標，width和height為矩形的寬度和高度

 1     <script>
 2         window.onload = function(){
 3             var oCanvas = document.querySelector( "#canvas" ),
 4                 oGc = oCanvas.getContext( '2d' );
 5     
 6             oGc.strokeStyle = '#09f';
 7             oGc.strokeRect( 50, 50, 500, 300 );
 8         }
 9     </script>
10     </head>
11     <body>
12     <canvas id="canvas" width="600" height="400"></canvas>
13     </body>

注意：oGc.strokeStyle = '#09f'; 如果把這句代碼放在oGc.strokeRect( 50, 50, 500, 300 );的后面，那么設置的線條樣式將不會生效，strokeStyle一定要在畫圖之前設置，否則是不會應用到的

?填充矩形API

?cxt.fillStyle = 屬性值;

cxt.fillRect( x, y, width, height );

跟上面是一樣的，只是把stoke換成了fill，fill就是填充的意思

畫一個帶有透明度的矩形：

 1 <script>
 2     window.onload = function(){
 3         var oCanvas = document.querySelector( "#canvas" ),
 4             oGc = oCanvas.getContext( '2d' );
 5 
 6         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
 7         oGc.fillRect( 50, 50, 500, 300 );
 8     }
 9 </script>
10 </head>
11 <body>
12 <canvas id="canvas" width="600" height="400"></canvas>
13 </body>

另一種繪制矩形的API：cxt.rect( x, y, width, height );

他與strokeRect和fillRect有什么區別呢？

1，共同點：參數的意思相同

2，不同點，調用strokeRect和fillRect會立即繪制出矩形，而rect并不會，他需要調用stoke()或者fill()方法，才能把矩形繪制出來

 1 <script>
 2     window.onload = function(){
 3         var oCanvas = document.querySelector( "#canvas" ),
 4             oGc = oCanvas.getContext( '2d' );
 5 
 6         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
 7         oGc.rect( 50, 50, 500, 300 );
 8         // oGc.stroke();
 9         oGc.fill(); 
10     }
11 </script>
12 </head>
13 <body>
14 <canvas id="canvas" width="600" height="400"></canvas>
15 </body>

清空矩形API：cxt.clearRect( x, y, width, height ); 參數跟strokeRect,fillRect意思一樣

 1 <script>
 2     window.onload = function(){
 3         var oCanvas = document.querySelector( "#canvas" ),
 4             oGc = oCanvas.getContext( '2d' );
 5 
 6         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
 7         oGc.fillRect( 50, 50, 500, 300 );
 8 
 9         oGc.clearRect( 100, 100, 200, 200 );
10     }
11 </script>
12 </head>
13 <body>
14 <canvas id="canvas" width="600" height="400"></canvas>
15 </body>

用fillRect和clearRect畫一個加號，當然你可以用moveTo和lineTo,不過代碼應該比這種方法多了不少.

 1 <script>
 2     window.onload = function(){
 3         var oCanvas = document.querySelector( "#canvas" ),
 4             oGc = oCanvas.getContext( '2d' );
 5 
 6         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';
 7         oGc.fillRect( 100, 100, 200, 200 );
 8         oGc.clearRect( 100, 100, 50, 50 );
 9         oGc.clearRect( 250, 100, 50, 50 );
10         oGc.clearRect( 250, 250, 50, 50 );
11         oGc.clearRect( 100, 250, 50, 50 );
12     }
13 </script>
14 </head>
15 <body>
16 <canvas id="canvas" width="400" height="400"></canvas>
17 </body>

繪制一個調色板：

 1 <style>
 2     body {
 3         background:#000;
 4     }
 5     #canvas {
 6         background:white;
 7     }
 8 </style>
 9 <script>
10     window.onload = function(){
11         var oCanvas = document.querySelector( "#canvas" ),
12             oGc = oCanvas.getContext( '2d' ),
13             aColor = [ '00', '33', '66', '99', 'cc', 'ff' ],
14             aMiddle = [ 'ff', 'cc', '99', '66', '33', '00' ], count = 0;
15         for( var i = 0; i < 12; i++ ){
16             for( var j = 0; j < 18; j++ ){
17                 count++;
18                 if ( i < 6 && count < 6 && j < 6 )
19                     oGc.fillStyle = `#${aColor[i]}${aMiddle[0]}${aColor[j]}`;
20                 else if( i < 6 && count < 12 && j < 12 )
21                     oGc.fillStyle = `#${aColor[i]}${aMiddle[1]}${aColor[j-6]}`;
22                 else if ( i < 6 && count < 18 && j < 18 )
23                     oGc.fillStyle = `#${aColor[i]}${aMiddle[2]}${aColor[j-12]}`;
24                 else if ( count < 6 && j < 6 )
25                     oGc.fillStyle = `#${aColor[i-6]}${aMiddle[3]}${aColor[j]}`;
26                 else if ( count < 12 && j < 12 )
27                     oGc.fillStyle = `#${aColor[i-6]}${aMiddle[4]}${aColor[j-6]}`;
28                 else if ( count < 18 && j < 18 )
29                     oGc.fillStyle = `#${aColor[i-6]}${aMiddle[5]}${aColor[j-12]}`;
30                 oGc.fillRect( j * 40, i * 40, 40, 40 );
31             }
32             count = 0;
33         }
34     }
35 </script>
36 </head>
37 <body>
38 <canvas id="canvas" width="720" height="720"></canvas>
39 </body>

javascript原生實現調色板：

 1         var aColor = [ '00', '33', '66', '99', 'cc', 'ff' ],
 2             aMiddle = [ 'ff', 'cc', '99', '66', '33','00' ];
 3 
 4         document.write( "<table>" );
 5         for( var i = 0; i < 12; i++ ){
 6             document.write( "<tr>" );
 7             for( var j = 0 ; j < 18; j++ ) {
 8                 if ( i < 6 && j < 6 ) //前6行,左6列
 9                     document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[0] + aColor[j] + "'>&nbsp;</td>" );
10                 else if ( i < 6 && j < 12 ){ //前6行 中間6列
11                     document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[1] + aColor[j-6] + "'>&nbsp;</td>" );
12                 }else if ( i < 6 && j < 18 ){ //前6行, 后面6列
13                     document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[2] + aColor[j-12] + "'>&nbsp;</td>" );
14                 }else if ( i < 12 && j < 6 ){ //后6行, 左6列
15                     document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[3] + aColor[j] + "'>&nbsp;</td>" );
16                 }else if ( i < 12 && j < 12 ){ //后6行, 中6列
17                     document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[4] + aColor[j-6] + "'>&nbsp;</td>" );
18                 }else if ( i < 12 && j < 18 ){ //后6行, 后6列
19                     document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[5] + aColor[j-12] + "'>&nbsp;</td>" );
20                 }
21             }
22             document.write( "</tr>" );
23         }
24         document.write( "</table>" );