[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

时间：2021-11-06 17:27:59

我们接着上文[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的左上角.

画一根直线:

 <style>

     body {

         background:#000;

     }

     #canvas {

         background:white;

     }

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.moveTo( 50, 50 );

         oGc.lineTo( 250, 50 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

 <canvas id="canvas"></canvas>

 </body>

如果把stroke注释了，是不会出现线条的，stoke的作用就是用来将点连起来

通过2个实例来区分，moveTo与lineTo的区别

 <style>

     body {

         background:#000;

     }

     #canvas {

         background:white;

     }

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.moveTo( 50, 50 );

         oGc.lineTo( 250, 50 );

         oGc.moveTo( 50, 200 );

         oGc.lineTo( 250, 200 );

         oGc.stroke();

         oGc.moveTo( 300, 50 );

         oGc.lineTo( 500, 50 );

         oGc.lineTo( 300, 200 );

         oGc.lineTo( 500, 200 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

左右两边的线形图，代码就一点区别，左边图形是第二个点用了lineTo, 第三个点用了moveTo, 右边图形第二个点用了lineTo，第三个点还是lineTo，从图中你应该能感受到这两个方法的区别吧？

 画三角形

 <style>

     body {

         background:#000;

     }

     #canvas {

         background:white;

     }

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.moveTo( 50, 50 );

         oGc.lineTo( 450, 50 );

         oGc.lineTo( 450, 300 );

         oGc.lineTo( 50, 50 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

把上面的代码，稍微修改下，就能画出一个矩形了

 <style>

     body {

         background:#000;

     }

     #canvas {

         background:white;

     }

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.moveTo( 50, 50 );

         oGc.lineTo( 450, 50 );

         oGc.lineTo( 450, 300 );

         oGc.lineTo( 50, 300 );

         oGc.lineTo( 50, 50 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

二，canvas提供了画矩形的API

通过线条我们也能拼接出一个矩形，但是代码太多，每个点都要把握，显得比较麻烦，canvas为我们提供了画矩形的API，有两种，一种是描边矩形，一种是填充矩形.

cxt.strokeStyle = 属性值

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

strokeStyle后面的属性是为了修饰线条的，主要包括( 颜色值，渐变色，图案 ），颜色支持英文单词，十六进制，RGB, RGBA格式的颜色设置.

strokeRect: x, y为矩形的左上角坐标，width和height为矩形的宽度和高度

     <script>

         window.onload = function(){

             var oCanvas = document.querySelector( "#canvas" ),

                 oGc = oCanvas.getContext( '2d' );

             oGc.strokeStyle = '#09f';

             oGc.strokeRect( 50, 50, 500, 300 );

         }

     </script>

     </head>

     <body>

     <canvas id="canvas" width="600" height="400"></canvas>

     </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

注意：oGc.strokeStyle = '#09f'; 如果把这句代码放在oGc.strokeRect( 50, 50, 500, 300 );的后面，那么设置的线条样式将不会生效，strokeStyle一定要在画图之前设置，否则是不会应用到的

 填充矩形API

cxt.fillStyle = 属性值;

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

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

画一个带有透明度的矩形：

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';

         oGc.fillRect( 50, 50, 500, 300 );

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

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

他与strokeRect和fillRect有什么区别呢？

1，共同点：参数的意思相同

2，不同点，调用strokeRect和fillRect会立即绘制出矩形，而rect并不会，他需要调用stoke()或者fill()方法，才能把矩形绘制出来

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';

         oGc.rect( 50, 50, 500, 300 );

         // oGc.stroke();

         oGc.fill();

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="400"></canvas>

 </body>

清空矩形API：cxt.clearRect( x, y, width, height ); 参数跟strokeRect,fillRect意思一样

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';

         oGc.fillRect( 50, 50, 500, 300 );

         oGc.clearRect( 100, 100, 200, 200 );

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

用fillRect和clearRect画一个加号，当然你可以用moveTo和lineTo,不过代码应该比这种方法多了不少.

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         oGc.fillStyle = 'rgba( 255, 0, 0, 0.3 )';

         oGc.fillRect( 100, 100, 200, 200 );

         oGc.clearRect( 100, 100, 50, 50 );

         oGc.clearRect( 250, 100, 50, 50 );

         oGc.clearRect( 250, 250, 50, 50 );

         oGc.clearRect( 100, 250, 50, 50 );

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="400" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

绘制一个调色板：

 <style>

     body {

         background:#000;

     }

     #canvas {

         background:white;

     }

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             aColor = [ '00', '33', '66', '99', 'cc', 'ff' ],

             aMiddle = [ 'ff', 'cc', '99', '66', '33', '00' ], count = 0;

         for( var i = 0; i < 12; i++ ){

             for( var j = 0; j < 18; j++ ){

                 count++;

                 if ( i < 6 && count < 6 && j < 6 )

                     oGc.fillStyle = `#${aColor[i]}${aMiddle[0]}${aColor[j]}`;

                 else if( i < 6 && count < 12 && j < 12 )

                     oGc.fillStyle = `#${aColor[i]}${aMiddle[1]}${aColor[j-6]}`;

                 else if ( i < 6 && count < 18 && j < 18 )

                     oGc.fillStyle = `#${aColor[i]}${aMiddle[2]}${aColor[j-12]}`;

                 else if ( count < 6 && j < 6 )

                     oGc.fillStyle = `#${aColor[i-6]}${aMiddle[3]}${aColor[j]}`;

                 else if ( count < 12 && j < 12 )

                     oGc.fillStyle = `#${aColor[i-6]}${aMiddle[4]}${aColor[j-6]}`;

                 else if ( count < 18 && j < 18 )

                     oGc.fillStyle = `#${aColor[i-6]}${aMiddle[5]}${aColor[j-12]}`;

                 oGc.fillRect( j * 40, i * 40, 40, 40 );

             }

             count = 0;

         }

     }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="720" height="720"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

javascript原生实现调色板：

         var aColor = [ '00', '33', '66', '99', 'cc', 'ff' ],

             aMiddle = [ 'ff', 'cc', '99', '66', '33','00' ];

         document.write( "<table>" );

         for( var i = 0; i < 12; i++ ){

             document.write( "<tr>" );

             for( var j = 0 ; j < 18; j++ ) {

                 if ( i < 6 && j < 6 ) //前6行,左6列

                     document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[0] + aColor[j] + "'>&nbsp;</td>" );

                 else if ( i < 6 && j < 12 ){ //前6行 中间6列

                     document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[1] + aColor[j-6] + "'>&nbsp;</td>" );

                 }else if ( i < 6 && j < 18 ){ //前6行, 后面6列

                     document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[2] + aColor[j-12] + "'>&nbsp;</td>" );

                 }else if ( i < 12 && j < 6 ){ //后6行, 左6列

                     document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[3] + aColor[j] + "'>&nbsp;</td>" );

                 }else if ( i < 12 && j < 12 ){ //后6行, 中6列

                     document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[4] + aColor[j-6] + "'>&nbsp;</td>" );

                 }else if ( i < 12 && j < 18 ){ //后6行, 后6列

                     document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[5] + aColor[j-12] + "'>&nbsp;</td>" );

                 }

             }

             document.write( "</tr>" );

         }

         document.write( "</table>" );

相关文章