canvas学习总结

学习地址
https://www.runoob.com/w3cnote/html5-canvas-intro.html

一、绘制画布

<canvas
      class="canvas-tutorial"
      id="tutorial"
      width="300"
      height="300"
    ></canvas>

二、绘制矩形

   /**
     * 1、绘制矩形
     */
    drawReact() {
      var canvas = document.getElementById("tutorial");
      //检查浏览器是否支持canvas
      if (!canvas.getContext) return;
      //1、渲染上下文
      var ctx = canvas.getContext("2d");
      console.log(ctx);
      ctx.fillStyle = "rgb(200,0,0)"; //颜色
      //2、绘制一个填充的矩形
      ctx.fillRect(10, 10, 50, 80);

      // 绘制一个矩形的边框 上 右 下 左 顺序随便t(x, y, widh, height)
      // ctx.strokeRect(10,10,50,1) //绘制单边边框
      // ctx.strokeRect(60,10,1,80)
      // ctx.strokeRect(10,90,50,1)
      // ctx.strokeRect(10,10,1,80)

      ctx.strokeRect(10, 10, 50, 80); //与上面四行代码等同

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect(30, 30, 55, 55);

      // 3、清除指定的矩形区域，然后这块区域会变的完全透明 clearRect(x, y, widh, height)
      ctx.clearRect(30, 30, 15, 15);
    },

结果如图

image.png

三、绘制线段

 /**
     * 2、绘制线段
     */
    drawLine() {
      var canvas = document.getElementById("tutorial");
      if (!canvas.getContext) return;
      var ctx = canvas.getContext("2d");
      ctx.beginPath(); //新建一条path
      ctx.moveTo(50, 50); //把画笔移动到指定的坐标
      ctx.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.
      //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
      ctx.closePath();
      ctx.stroke(); //绘制路径。
    },

结果如图

image.png

##绘制三角形
 /**绘制三角形 */
    drawsanjiaoxing(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 200);
      ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
    ctx.stroke(); //描边。stroke不会自动closePath()


//下面这行代码代替上面两行,绘制填充三角形
//    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径
},

image.png

填充三角形

    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径

image.png