主頁 > 知識(shí)庫 > HTML5 canvas基本繪圖之繪制線條

HTML5 canvas基本繪圖之繪制線條

熱門標(biāo)簽:西寧智能外呼系統(tǒng)加盟 高德地圖標(biāo)注賓館位置 電視購物電銷外呼系統(tǒng) 百應(yīng)電銷機(jī)器人產(chǎn)業(yè) 電話機(jī)器人如何 聯(lián)通400電話申請(qǐng) 杭州營銷電銷機(jī)器人供應(yīng)商 貸款電銷人工和機(jī)器人哪個(gè)好 飛亞外呼系統(tǒng)

<canvas></canvas>是HTML5中新增的標(biāo)簽,用于繪制圖形,實(shí)際上,這個(gè)標(biāo)簽和其他的標(biāo)簽一樣,其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象,我們可以通過JavaScript腳本來控制該對(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)行繪圖。

線條屬性

除了上面用到的lineWidth屬性,線條還有以下幾個(gè)屬性:

 •lineCap 屬性設(shè)置或返回線條末端線帽的樣式,可以取以下幾個(gè)值:
“butt” 向線條的每個(gè)末端添加平直的邊緣(默認(rèn));
“round” 向線條的每個(gè)末端添加圓形線帽;
“square” 向線條的每個(gè)末端添加正方形線帽。

 •lineJoin 屬性當(dāng)兩條線交匯時(shí)設(shè)置或返回所創(chuàng)建邊角的類型,可以取以下幾個(gè)值:
“miter” 創(chuàng)建尖角(默認(rèn));
“bevel” 創(chuàng)建斜角;
“round” 創(chuàng)建圓角。

 •miterLimit 屬性設(shè)置或返回最大斜接長度(默認(rèn)為10)。斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離。只有當(dāng) lineJoin 屬性為 “miter” 時(shí),miterLimit 才有效。 

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

  1. var canvas = document.getElementById("canvas");   
  2.     var context = canvas.getContext("2d");   
  3.     //測試lineCap屬性   
  4.     //設(shè)置基準(zhǔn)線便于觀察   
  5.     context.moveTo(10,10);   
  6.     context.lineTo(10,200);   
  7.     context.moveTo(200,10);   
  8.     context.lineTo(200,200);   
  9.     context.lineWidth="1";   
  10.     context.stroke();   
  11.     //butt   
  12.     context.beginPath();   
  13.     context.moveTo(10,50);   
  14.     context.lineTo(200,50);   
  15.     context.lineCap="butt";   
  16.     context.lineWidth="10";   
  17.     context.stroke();   
  18.     //round   
  19.     context.beginPath();   
  20.     context.moveTo(10,100);   
  21.     context.lineTo(200,100);   
  22.     context.lineCap="round";   
  23.     context.lineWidth="10";   
  24.     context.stroke();   
  25.     //square   
  26.     context.beginPath();   
  27.     context.moveTo(10,150);   
  28.     context.lineTo(200,150);   
  29.     context.lineCap="square";   
  30.     context.lineWidth="10";   
  31.     context.stroke();   
  32.   
  33.     //測試linJoin屬性   
  34.     //miter   
  35.     context.beginPath();   
  36.     context.moveTo(300,50);   
  37.     context.lineTo(450,100);   
  38.     context.lineTo(300,150);   
  39.     context.lineJoin="miter";   
  40.     context.lineWidth="10";   
  41.     context.stroke();   
  42.     //round   
  43.     context.beginPath();   
  44.     context.moveTo(400,50);   
  45.     context.lineTo(550,100);   
  46.     context.lineTo(400,150);   
  47.     context.lineJoin="round";   
  48.     context.lineWidth="10";   
  49.     context.stroke();   
  50.     //square   
  51.     context.beginPath();   
  52.     context.moveTo(500,50);   
  53.     context.lineTo(650,100);   
  54.     context.lineTo(500,150);   
  55.     context.lineJoin="bevel";   
  56.     context.lineWidth="10";   
  57.     context.stroke();   
  58.   
  59.     //測試miterLimit屬性   
  60.     context.beginPath();   
  61.     context.moveTo(700,50);   
  62.     context.lineTo(850,100);   
  63.     context.lineTo(700,150);   
  64.     context.lineJoin="miter";   
  65.     context.miterLimit="2";   
  66.     context.lineWidth="10";   
  67.     context.strokeStyle="#2913EC";   
  68.     context.stroke();   
  69.   

各屬性的不同取值的效果如下:

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:晉中 內(nèi)蒙古 牡丹江 玉溪 撫州 安慶 邯鄲 煙臺(tái)

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5 canvas基本繪圖之繪制線條》,本文關(guān)鍵詞  HTML5,canvas,基本,繪圖,之,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 canvas基本繪圖之繪制線條》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML5 canvas基本繪圖之繪制線條的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章