當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2025/3/8 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

我們接著上文[js高手之路] html5 canvas系列教程 - 認(rèn)識(shí)canvas以及基本使用方法繼續(xù).

一、直線的繪制

cxt.moveTo( x1, y1 )：將畫筆移動(dòng)到x1, y1這個(gè)點(diǎn)

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

cxt.stroke();用畫筆連線，moveTo,lineTo并不會(huì)產(chǎn)生實(shí)際的線條

x1,y1,x2,y2是點(diǎn)的坐標(biāo)，canvas的坐標(biāo)原點(diǎn)在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注釋了，是不會(huì)出現(xiàn)線條的，stoke的作用就是用來將點(diǎn)連起來

通過2個(gè)實(shí)例來區(qū)分，moveTo與lineTo的區(qū)別

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>

左右兩邊的線形圖，代碼就一點(diǎn)區(qū)別，左邊圖形是第二個(gè)點(diǎn)用了lineTo, 第三個(gè)點(diǎn)用了moveTo, 右邊圖形第二個(gè)點(diǎn)用了lineTo，第三個(gè)點(diǎn)還是lineTo，從圖中你應(yīng)該能感受到這兩個(gè)方法的區(qū)別吧？

?畫三角形

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>

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

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

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

cxt.strokeStyle = 屬性值

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

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

strokeRect: x, y為矩形的左上角坐標(biāo)，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 );的后面，那么設(shè)置的線條樣式將不會(huì)生效，strokeStyle一定要在畫圖之前設(shè)置，否則是不會(huì)應(yīng)用到的

?填充矩形API

?cxt.fillStyle = 屬性值;

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

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

畫一個(gè)帶有透明度的矩形：

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

他與strokeRect和fillRect有什么區(qū)別呢？

1，共同點(diǎn)：參數(shù)的意思相同

2，不同點(diǎn)，調(diào)用strokeRect和fillRect會(huì)立即繪制出矩形，而rect并不會(huì)，他需要調(diào)用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 ); 參數(shù)跟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畫一個(gè)加號(hào)，當(dāng)然你可以用moveTo和lineTo,不過代碼應(yīng)該比這種方法多了不少.

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>

繪制一個(gè)調(diào)色板：

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原生實(shí)現(xiàn)調(diào)色板：

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] + "'> </td>" ); 10 else if ( i < 6 && j < 12 ){ //前6行中間6列 11 document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[1] + aColor[j-6] + "'> </td>" ); 12 }else if ( i < 6 && j < 18 ){ //前6行, 后面6列 13 document.write( "<td style='background-color:#" + aColor[i]+ aMiddle[2] + aColor[j-12] + "'> </td>" ); 14 }else if ( i < 12 && j < 6 ){ //后6行, 左6列 15 document.write( "<td style='background-color:#" + aColor[i-6]+ aMiddle[3] + aColor[j] + "'> </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] + "'> </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] + "'> </td>" ); 20 } 21 } 22 document.write( "</tr>" ); 23 } 24 document.write( "</table>" );

總結(jié)

以上是生活随笔為你收集整理的[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： SSM框架整合中遇到重复的问题Ambig
下一篇：第三方应用商店仍为用户获取APP主渠道