title

canvas形状

  • 创建canvas

    <canvas id="canvas" width="400" height="400"></canvas>

    类似于image标签,有width和height属性

  • js绘制

    • 获取canvas的dom元素

    • 获取dom元素的canvas绘制上下文

      const dom = document.getElementById('canvas') let ctx = canvas.getContext('2d')

  • 形状

    • 线性

      ctx.beginPath() //开始路径 ctx.moveTo(60, 60) //每次路径的起点坐标 (x,y横坐标和纵坐标) ctx.lineTo(100, 60) // 一个线性的交点 ctx.lineTo(60, 100) // 一个线性的交点 ctx.closePath() // 关闭路径绘制 ctx.fill() //填充 ['stroke']

    • 圆弧

      ctx.beginPath() ctx.arc(100, 200, 40, 0, 2 * Math.PI, true) // (x,y,半径,起始角度,终止角度,是否顺时针) ctx.fill()

    • 二次贝塞尔曲线

      ctx.moveTo(140, 400) // (起始点的坐标) ctx.quadraticCurveTo(15, 400, 100, 500) // (一个控制点的坐标和终止点的坐标) ctx.closePath() ctx.stroke()

    • 三次贝塞尔曲线

      ctx.moveTo(140, 600) //(起始点的坐标) ctx.bezierCurveTo(15, 260, 30, 300, 200, 500) // (一个控制点的坐标,另一个控制点的坐标,终止点的坐标) ctx.closePath() ctx.stroke()

  • Path2D 对象

    let rectangle = new Path2D() rectangle.rect(300, 60, 80, 80) ctx.fill(rectangle) let circleangle = new Path2D() circleangle.arc(340, 200, 40, 0, 2 * Math.PI, true) ctx.stroke(circleangle)
    • 把形状路径存为Path2D对象,随时取用