首頁 >web前端 >H5教程 >怎樣用canvas來繪製線條

怎樣用canvas來繪製線條

php中世界最好的语言
php中世界最好的语言原創
2018-03-14 09:45:172339瀏覽

這次帶給大家怎樣用canvas來繪製線條,用canvas來繪製線條的注意事項有哪些,下面就是實戰案例,一起來看一下。

canvas是html5的新標籤, 標籤只是圖形容器,您必須使用腳本來繪製圖形。
接下來,我們使用canvas來繪製線條。
首先,新html文件,並在文件中加入canvas標籤,如下所示。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"/>
    <title>Canvas绘图与动画基础</title></head><body><style>
    #canvas{        border: 1px solid #aaa;        text-align: center;
    }</style><canvas id="canvas" width="1024" height="768">
    当用户浏览器不支持Canvas,请更换浏览器重试!</canvas></body></html>

若瀏覽器不支援canvas標籤,則canvas標籤內的字體會顯示,一般情況下,顯示canvas內的繪畫。
現在,讓我們開始畫一條線。
首先,得到canvas:

var canvas = document.getElementById("canvas");

canvas的寬和高一般不在style內設置,可以在canvas和id同一等級內設置,如上面html內所示,或者使用js設置。

canvas.width=1014;
 canvas.height=768;

下來,得到繪圖的上下文環境

var context = canvas.getContext("2d");


我們一般都是使用context來操作canvas,下來,我們在程式碼裡具體學習一下:

        var context = canvas.getContext("2d");//得到绘图的上下文环境
        context.beginPath();//开始绘制线条,若不使用beginPath,则不能绘制多条线条
        context.moveTo(100, 100);//线条开始位置
        context.lineTo(700, 700);//线条经过点
        context.lineTo(100, 700);
        context.lineTo(100, 100);
        context.closePath();//结束绘制线条,不是必须的
       
        context.lineWidth = 5;//设置线条宽度
        context.strokeStyle = "red";//设置线条颜色
        context.stroke();//用于绘制线条
        context.beginPath();
        context.moveTo(200, 100);
        context.lineTo(700, 600);
        context.closePath();
        context.strokeStyle = "black";
        context.stroke();

運行上面程式碼,得到一個紅色的閉合三角形,和一條黑色實線,如下圖所示:

怎樣用canvas來繪製線條

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼用canvas來繪製彩色七巧板

class="no-js"是什麼意思

#

以上是怎樣用canvas來繪製線條的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn