站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        如何使用HTML5 canvas繪制線條

        使用HTML Canvas繪制線條,我們需要用到的是Canvas上下文的MoveTo()和LineTo()方法,下面我們就來看看具體的內(nèi)容。

        如何使用HTML5 canvas繪制線條

        我們先來看一個示例

        代碼如下

        <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title></title>   <meta charset="utf-8" />          <script type="text/javascript">        function draw() {           var canvas = document.getElementById('SimpleCanvas');            if ( ! canvas || ! canvas.getContext ) {             return false;           }            var context = canvas.getContext('2d');           context.beginPath();           context.moveTo(120, 60);           context.lineTo(240, 90);           context.stroke();       }     </script> </head> <body onload="draw()" style="background-color:#D0D0D0;">     <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>     <div>Canvas Demo</div> </body> </html>

        說明:

          function draw() {     var canvas = document.getElementById('SimpleCanvas');     if ( ! canvas || ! canvas.getContext ) {       return false;     }     var context = canvas.getContext('2d');     context.beginPath();     context.moveTo(120, 60);     context.lineTo(240, 90);     context.stroke();   }

        分析

        上述的這個JavaScript代碼是繪制代碼,使用document.getElementById()方法獲取Canvas上下文,并調(diào)用Canvas對象上的getContext()方法以獲取Canvas上下文,調(diào)用上下文的beginPath()方法來開始路徑,使用moveTo()將筆移動到指定位置,并將線條繪制到lineTo()方法指定的位置,通過調(diào)用stroke()方法執(zhí)行繪圖。

        運(yùn)行結(jié)果

        執(zhí)行上述HTML文件,將會顯示如下效果

        如何使用HTML5 canvas繪制線條

        接著我們再來看一個示例

        代碼如下

        <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title></title>   <meta charset="utf-8" />          <script type="text/javascript">        function draw() {           var canvas = document.getElementById('SimpleCanvas');            if ( ! canvas || ! canvas.getContext ) {             return false;           }            var context = canvas.getContext('2d');           context.beginPath();           context.moveTo(120, 60);           context.lineTo(240, 90);           context.stroke();            context.beginPath();           context.moveTo(120, 75);           context.lineTo(260, 120);           context.stroke();            context.beginPath();           context.moveTo(160, 100);           context.lineTo(200, 140);           context.lineWidth = "3";           context.stroke();            context.beginPath();           context.moveTo(200, 40);           context.lineTo(360, 120);           context.strokeStyle = '#00C080';           context.stroke();            context.beginPath();           context.moveTo(40, 20);           context.lineTo(80, 160);           context.strokeStyle = '#C00080';           context.lineWidth = "1";           context.stroke();            context.beginPath();           context.moveTo(400, 10);           context.lineTo(380, 200);           context.strokeStyle = "rgb(96, 96, 225)";           context.stroke();       }     </script> </head> <body onload="draw()" style="background-color:#D0D0D0;">     <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>     <div>Canvas Demo</div> </body> </html>

        說明:

        在上面的代碼中,我們改變了線條的粗細(xì)和顏色。

        要更改線條的粗細(xì),請?jiān)贑anvas的Context的lineWidth屬性中設(shè)置線條的粗細(xì);要更改線條顏色,請?jiān)贑ontext的strokeStyle屬性中指定繪圖顏色。對于顏色規(guī)范,可以使用諸如十六進(jìn)制格式,“RGB”格式,“blue”,“red”等顏色名稱;此外,只要設(shè)置了一次值,即使使用beginPath()創(chuàng)建新路徑,也不會初始化設(shè)置的值。

          context.beginPath();   context.moveTo(160, 100);   context.lineTo(200, 140);   context.lineWidth = "3";   context.stroke();   context.beginPath();   context.moveTo(200, 40);   context.lineTo(360, 120);   context.strokeStyle = '#00C080';   context.stroke();

        上述代碼的情況下,由于第二條線沒有指定lineWidth,因此可以利用之前指定的lineWidth的值。

        運(yùn)行結(jié)果

        如何使用HTML5 canvas繪制線條

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 亚洲国产精品欧美日韩一区二区 | 99久久99这里只有免费的精品| 国产一区精品| 久久精品九九亚洲精品天堂| 久久精品无码专区免费青青| 无码人妻一区二区三区精品视频| 国产线视频精品免费观看视频| 国产在线精品一区二区不卡| 国产精品无码无卡在线播放| 色欲精品国产一区二区三区AV | 成人精品一区二区三区免费看| 国产精品伦一区二区三级视频| 亚洲AV无码久久精品蜜桃| 午夜福利麻豆国产精品| 久久无码人妻精品一区二区三区| 国产精品综合专区中文字幕免费播放 | 欧美成人精品一级高清片| 国产成人精品一区二区秒拍 | 成人精品一区二区三区中文字幕| 最新国产精品拍自在线播放| 蜜臀久久99精品久久久久久| 精品久久久久久久中文字幕| 精品国产AⅤ一区二区三区4区| 国产亚洲精品精品国产亚洲综合| 国产精品欧美亚洲韩国日本久久| 999精品色在线播放| 一本一道久久精品综合| 99精品影院| 国产精品videossex白浆| 国产日韩欧美精品| 国产精品网站在线观看免费传媒| 色欲久久久天天天综合网精品 | 欧美精品色婷婷五月综合| 免费精品视频在线| 无码国产亚洲日韩国精品视频一区二区三区 | 亚洲av无码国产精品色午夜字幕| 亚洲国产成人精品女人久久久| 亚洲A∨精品一区二区三区| 在线精品视频一区二区| 特级精品毛片免费观看| 国内精品久久久久久99|