HTML5中的Canvas的常用線條屬性值是什么

本篇文章給大家分享的是有關(guān)HTML5中的Canvas的常用線條屬性值是什么，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

在成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作過(guò)程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)建站還需要根據(jù)客戶的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

線條屬性概述
線條的屬性共有以下四個(gè)：
1、lineCap屬性
lineCap 定義上下文中線的端點(diǎn)，可以有以下 3 個(gè)值。

butt：默認(rèn)值，端點(diǎn)是垂直于線段邊緣的平直邊緣。
round：端點(diǎn)是在線段邊緣處以線寬為直徑的半圓。
square：端點(diǎn)是在選段邊緣處以線寬為長(zhǎng)、以一半線寬為寬的矩形。

2、 lineJoin屬性
lineJoin 定義兩條線相交產(chǎn)生的拐角，可將其稱為連接。在連接處創(chuàng)建一個(gè)填充三角形，可以使用 lineJoin 設(shè)置它的基本屬性。

miter：默認(rèn)值，在連接處邊緣延長(zhǎng)相接。miterLimit 是角長(zhǎng)和線寬所允許的最大比例(默認(rèn)是 10)。
bevel：連接處是一個(gè)對(duì)角線斜角。
round：連接處是一個(gè)圓。

3、線寬
lineWidth 定義線的寬度(默認(rèn)值為 1.0)。


4、筆觸樣式
strokeStyle 定義線和形狀邊框的顏色和樣式。
后面兩個(gè)前面已經(jīng)說(shuō)過(guò)了，這里我們著重來(lái)看看前兩個(gè)屬性。
線條的帽子lineCap

廢話不多說(shuō)，直接上代碼看效果。

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

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>線條的帽子</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.lineWidth = 50;   
        context.strokeStyle = "#1BAAAA";   
  
        context.beginPath();   
        context.moveTo(100,100);   
        context.lineTo(700,100);   
        context.lineCap = "butt";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(100,300);   
        context.lineTo(700,300);   
        context.lineCap = "round";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(100,500);   
        context.lineTo(700,500);   
        context.lineCap = "square";   
        context.stroke();   
  
        //下面畫(huà)兩個(gè)基準(zhǔn)線方便觀察   
        context.lineWidth = 3;   
        context.strokeStyle = "black";   
  
        context.beginPath();   
        context.moveTo(100,0);   
        context.lineTo(100,600);   
        context.moveTo(700,0);   
        context.lineTo(700,600);   
        context.stroke();   
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
HTML5中的Canvas的常用線條屬性值是什么

這里我還做了兩條平行線做一下參考，這樣一眼就能看清lineCap三個(gè)值的特點(diǎn)。但要注意，這個(gè)帽子只在線條的端點(diǎn)處起作用，哪怕是折點(diǎn)很多的折線，也僅僅是在開(kāi)始和終止的兩個(gè)端點(diǎn)帶帽子。如果想改變線條折點(diǎn)(兩個(gè)線段的連接處)的樣式，那就要用到下面的lineJoin屬性。
線條的連接lineJoin

廢話不多說(shuō)，直接上代碼看效果。這段代碼改自4-3，只是設(shè)置了一下連接的屬性。

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

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>線條的連接</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.beginPath();   
        context.moveTo(100,100);   
        context.lineTo(300,300);   
        context.lineTo(100,500);   
        context.lineJoin = "miter";   
        context.lineWidth = 20;   
        context.strokeStyle = "red";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(300,100);   
        context.lineTo(500,300);   
        context.lineTo(300,500);   
        context.lineJoin = "bevel";   
        context.lineWidth = 20;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(500,100);   
        context.lineTo(700,300);   
        context.lineTo(500,500);   
        context.lineJoin = "round";   
        context.lineWidth = 20;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
HTML5中的Canvas的常用線條屬性值是什么

看不清的童鞋自己放大網(wǎng)頁(yè)或者自己將代碼的線寬調(diào)寬一點(diǎn)。
這里有一個(gè)很隱蔽的屬性，就是當(dāng)lineJoin設(shè)置為miter時(shí)（默認(rèn)），會(huì)解鎖一個(gè)成績(jī)，可以使用miterLimit屬性。
舉個(gè)例子看看。

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

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>miterLimit</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.beginPath();   
        context.moveTo(100,100);   
        context.lineTo(300,300);   
        context.lineTo(100,500);   
        context.lineJoin = "miter";   
        context.miterLimit = 10;   
        context.lineWidth = 5;   
        context.strokeStyle = "red";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(300,200);   
        context.lineTo(500,300);   
        context.lineTo(300,400);   
        context.lineJoin = "miter";   
        context.miterLimit = 10;   
        context.lineWidth = 5;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(500,290);   
        context.lineTo(700,300);   
        context.lineTo(500,310);   
        context.lineJoin = "miter";   
        context.miterLimit = 10;   
        context.lineWidth = 5;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
HTML5中的Canvas的常用線條屬性值是什么

會(huì)發(fā)現(xiàn)，這個(gè)miterLimit規(guī)定了一個(gè)自動(dòng)填充連接點(diǎn)的極限值。如果超過(guò)了這個(gè)值，會(huì)導(dǎo)致lineJoin屬性失效，會(huì)從 miter 變成 bevel?？梢钥闯鰜?lái)，這個(gè)值和線寬以及夾角有關(guān)，具體是啥關(guān)系。看下圖。
HTML5中的Canvas的常用線條屬性值是什么

可以看到，關(guān)系有點(diǎn)復(fù)雜。有興趣的小伙伴可以推導(dǎo)一下這個(gè)值與線寬、夾角的函數(shù)關(guān)系。其實(shí)，大多時(shí)候用不到這個(gè)隱藏屬性，即便用到了也是憑感覺(jué)寫(xiě)個(gè)數(shù)然后不滿意再調(diào)試即可。
高級(jí)線段繪制舉例
實(shí)際在畫(huà)布上繪制線段時(shí)，會(huì)有一些奇怪的現(xiàn)象發(fā)生，這里融合本節(jié)課學(xué)到的兩個(gè)線段的屬性講解一個(gè)。

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

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>miterLimit</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        // 實(shí)例1: 圓形端點(diǎn),斜角連接,在畫(huà)布左上角   
        context.beginPath();   
        context.moveTo(0,0);   
        context.lineTo(180,0);   
        context.lineTo(180,180);   
        context.lineJoin = 'bevel';   
        context.lineCap = 'round';   
        context.lineWidth = 10;   
        context.strokeStyle = "red";   
        context.stroke();   
  
        // 實(shí)例2: 圓形端點(diǎn),斜角連接,不在畫(huà)布左上角   
        context.beginPath();   
        context.moveTo(300,200);   
        context.lineTo(480,200);   
        context.lineTo(480,380);   
        context.lineJoin = 'bevel';   
        context.lineCap = 'round';   
        context.lineWidth = 10;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        // 實(shí)例3: 平直端點(diǎn),圓形連接,不在畫(huà)布左上角   
        context.beginPath();   
        context.moveTo(600,400);   
        context.lineTo(780,400);   
        context.lineTo(780,580);   
        context.lineJoin = 'round';   
        context.lineCap = 'butt';   
        context.lineWidth = 10;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
HTML5中的Canvas的常用線條屬性值是什么

這 3 個(gè)線段和連接的實(shí)例有助于說(shuō)明在畫(huà)布上繪制線段時(shí)不同屬性的組合。
實(shí)例 1 嘗試從畫(huà)布左上角開(kāi)始繪制，結(jié)果發(fā)生了一個(gè)奇怪的現(xiàn)象。Canvas 路徑在 x 軸和 y 軸方向上都繪制到了起點(diǎn)的外側(cè)。由于這個(gè)原因?qū)嵗?1 上面的線看起來(lái)要細(xì)些。另外，左上角水平部分中圓形端點(diǎn)也無(wú)法看到，它們都被繪制到了屏幕之外的負(fù)值坐標(biāo)區(qū)域。此外，lineJoin 定義的對(duì)角線斜角也沒(méi)有繪出。
實(shí)例 2 調(diào)整了例子 1 中出現(xiàn)的問(wèn)題,將起始點(diǎn)離開(kāi)左上角。這樣就繪制出了完整的水平線,并且圓形 lineCap 和斜角 lineJoin 都被繪制出來(lái)了。
實(shí)例 3 顯示了去掉 lineCap 設(shè)置后的默認(rèn)端點(diǎn)效果,并且將 lineJoin 調(diào)整為圓角。

以上就是HTML5中的Canvas的常用線條屬性值是什么，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：HTML5中的Canvas的常用線條屬性值是什么
文章鏈接：http://muchs.cn/article0/ipidoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、用戶體驗(yàn)、搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)