HTML5中canvas繪制線段的方法

發(fā)布時(shí)間：2021-05-20 11:06:52 來(lái)源：億速云閱讀：147 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹HTML5中canvas繪制線段的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過(guò)JavaScript腳本來(lái)控制該對(duì)象進(jìn)行繪圖。

<canvas></canvas>只是一個(gè)繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

1.獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；
2.調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；
3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。

繪制線段moveTo()和lineTo()

以下是一個(gè)簡(jiǎn)單的<canvas>繪圖示例：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>canvas繪圖演示</title>  
    <style type="text/css">  
        #canvas{   
            border: 1px solid #ADACB0;   
            display: block;   
            margin: 20px auto;   
        }   
    </style>  
</head>  
<body>  
    <canvas id="canvas" width="300" height="300">  
        你的瀏覽器還不支持canvas   
    </canvas>  
</body>  
<script type="text/javascript">  
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //設(shè)置對(duì)象起始點(diǎn)和終點(diǎn)   
    context.moveTo(10,10);   
    context.lineTo(200,200);   
    //設(shè)置樣式   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //繪制   
    context.stroke();   
</script>  
</html>

HTML5中canvas繪制線段的方法

如果沒(méi)有通過(guò)moveTo()特別指定，lineTo()的起始點(diǎn)是以上一個(gè)點(diǎn)為準(zhǔn)。因此，如果需要重新選擇起始點(diǎn)，則需要通過(guò)moveTo()方法。如果需要對(duì)不同的線段設(shè)置樣式，則需要通過(guò)context.beginPath()重新開(kāi)啟一條路徑，下面是一個(gè)示例：

JavaScript Code復(fù)制內(nèi)容到剪貼板

<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //設(shè)置對(duì)象起始點(diǎn)和終點(diǎn)   
    context.beginPath();   
    context.moveTo(100,100);   
    context.lineTo(700,100);   
    context.lineTo(700,400);   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //繪制   
    context.stroke();   
  
    context.beginPath();   
    context.moveTo(100,200);//這里的moveTo換成lineTo效果是一樣的   
    context.lineTo(600,200);   
    context.lineTo(600,400);   
    //strokeStyle的顏色有新的值，則覆蓋上面設(shè)置的值   
    //lineWidth沒(méi)有新的值，則按上面設(shè)置的值顯示   
    context.strokeStyle = "#0D25F6";   
    //繪制   
    context.stroke();   
</script>

HTML5中canvas繪制線段的方法

以上是“HTML5中canvas繪制線段的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

HTML5中canvas繪制線段的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽