HTML5 canvas基础制图之绘图线条

日期:2021-02-24 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

<canvas></canvas>是HTML5中新增的标识,用于绘图图型,具体上,这个标识和别的的标识1样,其独特的地方在于该标识能够获得1个CanvasRenderingContext2D目标,大家能够根据JavaScript脚本制作来操纵该目标开展制图。

<canvas></canvas>只是1个绘图图型的器皿,除id、class、style等特性外,也有height和width特性。在<canvas>>元素上制图关键有3步:

1.获得<canvas>元素对应的DOM目标,这是1个Canvas目标;
2.启用Canvas目标的getContext()方式,获得1个CanvasRenderingContext2D目标;
3.启用CanvasRenderingContext2D目标开展制图。

线条特性

除上面用到的lineWidth特性,线条也有下列几个特性:

 •lineCap 特性设定或回到线条尾端线帽的款式,能够取下列几个值:
“butt” 向线条的每一个尾端加上平直的边沿(默认设置);
“round” 向线条的每一个尾端加上圆形线帽;
“square” 向线条的每一个尾端加上正方形线帽。

 •lineJoin 特性当两条线交汇时设定或回到所建立边角的种类,能够取下列几个值:
“miter” 建立尖角(默认设置);
“bevel” 建立斜角;
“round” 建立圆角。

 •miterLimit 特性设定或回到最大斜接长度(默认设置为10)。斜接长度指的是在两条线交汇处内角和外角之间的间距。仅有当 lineJoin 特性为 “miter” 时,miterLimit 才合理。 

JavaScript Code拷贝內容到剪贴板

  1. var canvas = document.getElementById("canvas");   
  2.     var context = canvas.getContext("2d");   
  3.     //检测lineCap特性   
  4.     //设定标准线便于观查   
  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.   

各特性的不一样赋值的实际效果以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。