成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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

本篇文章給大家分享的是有關HTML5中的Canvas的常用線條屬性值是什么，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

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

butt：默認值，端點是垂直于線段邊緣的平直邊緣。
round：端點是在線段邊緣處以線寬為直徑的半圓。
square：端點是在選段邊緣處以線寬為長、以一半線寬為寬的矩形。

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

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

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


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

廢話不多說，直接上代碼看效果。

JavaScript Code復制內(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？！趕快換一個吧??！   
    </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();   
  
        //下面畫兩個基準線方便觀察   
        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>

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

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

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

JavaScript Code復制內(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？！趕快換一個吧??！   
    </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>

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

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

JavaScript Code復制內(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？！趕快換一個吧?。?nbsp;  
    </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>

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

會發(fā)現(xiàn)，這個miterLimit規(guī)定了一個自動填充連接點的極限值。如果超過了這個值，會導致lineJoin屬性失效，會從 miter 變成 bevel?？梢钥闯鰜恚@個值和線寬以及夾角有關，具體是啥關系?？聪聢D。
HTML5中的Canvas的常用線條屬性值是什么

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

JavaScript Code復制內(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？！趕快換一個吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        // 實例1: 圓形端點,斜角連接,在畫布左上角   
        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();   
  
        // 實例2: 圓形端點,斜角連接,不在畫布左上角   
        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();   
  
        // 實例3: 平直端點,圓形連接,不在畫布左上角   
        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>

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

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

以上就是HTML5中的Canvas的常用線條屬性值是什么，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

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

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

廣告

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

成都網(wǎng)站建設
崇信县| 曲阜市| 抚远县| 宁德市| 上栗县| 文昌市| 十堰市| 文昌市| 洪江市| 阳江市| 沈丘县| 响水县| 镇原县| 班戈县| 莒南县| 彰武县| 澎湖县| 西华县| 乳源| 同江市| 桃园市| 龙海市| 寻甸| 仁寿县| 山丹县| 合肥市| 盐边县| 芮城县| 上林县| 岳池县| 曲松县| 新平| 彭水| 阳谷县| 当阳市| 兖州市| 双鸭山市| 惠来县| 西昌市| 宁南县| 九寨沟县|