web技术学习笔记和分享

线条样式

01.端点样式

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
ctx.beginPath();
ctx.lineWidth = 40
ctx.moveTo(200, 200)
ctx.lineTo(350, 300)
ctx.lineTo(500, 200)
/* 
CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
参见 Canvas Tutorial 中的 Applying styles and color 章节。
语法
round
通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。

bevel
在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

miter(默认)
通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
*/
ctx.lineJoin = 'round';


/* 
miterLimit
斜接面限制比例的的数字。0、负数、Infinity 和 NaN 都会被忽略。
简释
ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示
        */
ctx.miterLimit = 1


/* 
lineCap是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：butt, round and square。默认值是 butt。

butt
线段末端以方形结束。

round
线段末端以圆形结束。

square
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
*/
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath();
// ctx.fill()

<template>
  <canvas id="c2" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c2");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  ctx.beginPath();
  ctx.lineWidth = 40;
  ctx.moveTo(200, 200);
  ctx.lineTo(350, 300);
  ctx.lineTo(500, 200);
  /* 
        CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
        参见 Canvas Tutorial 中的 Applying styles and color 章节。
        语法
       round
        通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。

        bevel
        在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

        miter(默认)
        通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
        */
  ctx.lineJoin = "round";

  /* 
        miterLimit
        斜接面限制比例的的数字。0、负数、Infinity 和 NaN 都会被忽略。
        简释
        ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
        只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示
                */
  ctx.miterLimit = 1;

  /* 
        lineCap是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：butt, round and square。默认值是 butt。
        
        butt
        线段末端以方形结束。

        round
        线段末端以圆形结束。

        square
        线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
        */
  ctx.lineCap = "round";
  ctx.stroke();
  ctx.closePath();
  // ctx.fill()
});
</script>

<style scoped></style>

02.虚线样式

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')

var value = 0
function render() {
ctx.clearRect(0, 0, c1.width, c1.height)
value += 1
if (value > 50) {
    value = 0
}
ctx.beginPath();
ctx.moveTo(300, 200)
ctx.lineTo(350, 250)
ctx.lineTo(350, 200)
ctx.lineTo(300, 200)

/* 
setLineDash() 方法在填充线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。
setLineDash(segments);
segments
一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
*/
ctx.setLineDash([3, 5])
/* 
CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现“蚂蚁线“的效果。
语法
ctx.lineDashOffset = value;
value
偏移量是 float 精度的数字。初始值为 0.0。
*/
ctx.lineDashOffset = value;
ctx.stroke()
// ctx.fill()
ctx.closePath()
setTimeout(render, 100)
}
setTimeout(render, 100)

<template>
  <canvas id="c1" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c1");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");

  var value = 0;
  function render() {
    ctx.clearRect(0, 0, c1.width, c1.height);
    value += 1;
    if (value > 50) {
      value = 0;
    }
    ctx.beginPath();
    ctx.moveTo(300, 200);
    ctx.lineTo(350, 250);
    ctx.lineTo(350, 200);
    ctx.lineTo(300, 200);

    /* 
            setLineDash() 方法在填充线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。
            setLineDash(segments);
            segments
            一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
            */
    ctx.setLineDash([3, 5]);
    /* 
            CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现“蚂蚁线“的效果。
            语法
            ctx.lineDashOffset = value;
            value
            偏移量是 float 精度的数字。初始值为 0.0。
            */
    ctx.lineDashOffset = value;
    ctx.stroke();
    // ctx.fill()
    ctx.closePath();
    setTimeout(render, 100);
  }
  setTimeout(render, 100);
});
</script>

<style scoped></style>

线条样式 ​

01.端点样式 ​

02.虚线样式 ​

线条样式

01.端点样式

02.虚线样式