canvas画布 入门

OVO
933 阅读1分钟

什么是canvas

  • Canvas 中文名叫 “画布”，是 HTML5 新增的一个标签。
  • Canvas 允许开发者通过 JS在这个标签上绘制各种图案。
  • Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
  • Canvas 在某些情况下可以 “代替” 图片。
  • Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。

首先了解canvas的x轴与y轴

image.png

一、填充效果

  • fillStyle = "red 或者 #fff" 填充区域的颜色
  • fillRect（X轴坐标，Y轴坐标，宽度，高度）填充区域
  • 效果：
<style>
    /* 给canvas添加一个边框 */
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <!-- 通过 width height 给画布添加宽高 注意不要带单位 -->
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    //获取canvas
    let canvas = document.querySelector("canvas");
    //canvas上下文环境对象
    let ctx = canvas.getContext("2d");
    //填充颜色
    ctx.fillStyle = "skyblue";
    //填充范围
    ctx.fillRect(100, 100, 100, 100);
  </script>

image.png

二、描边效果

  • strokeStyle="颜色" 描边颜色
  • strokeRect(X轴纵坐标，Y轴坐标，宽度，高度) 描边效果
  • 效果：
  <style>
    /* 给画布添加一个边框 */
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <!-- 通过 width height 给画布添加宽高 注意不要带单位 -->
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    //获取canvas
    let canvas = document.querySelector("canvas");
    //canvas上下文环境对象
    let ctx = canvas.getContext("2d");
    //描边颜色
    ctx.strokeStyle = "red";
    //描边效果
    ctx.strokeRect(100, 100, 100, 100);

image.png

三、清除

  • clearRect(X轴坐标，Y轴坐标，宽度，高度) 清除
  <style>
    /* 给画布添加一个边框 */
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <!-- 通过 width height 给画布添加宽高 注意不要带单位 -->
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    //获取canvas
    let canvas = document.querySelector("canvas");
    //canvas上下文环境对象
    let ctx = canvas.getContext("2d");
    //填充颜色
    ctx.fillStyle = "skyblue";
    //填充范围
    ctx.fillRect(100, 100, 100, 100);

    //清除
    ctx.clearRect(150, 100, 50, 50);
  </script>
  • 清除前后效果

image.png

三、绘制不同颜色的直线

  • moveTo(X轴坐标，Y轴坐标) 起点坐标
  • lineTo(X轴坐标，Y轴坐标) 下一个点坐标
  • stroke() 将坐标用一条线连接起来
  • strokeStyle="颜色" 线的颜色
  • linewidth="1" 线条宽度
<style>
    /* 给画布添加一个边框 */
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <!-- 通过 width height 给画布添加宽高 注意不要带单位 -->
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    //获取canvas
    let canvas = document.querySelector("canvas");
    //canvas上下文环境对象
    let ctx = canvas.getContext("2d");

    //开辟新路径
    ctx.beginPath();

    //起点坐标
    ctx.moveTo(100, 100);
    //线的颜色
    ctx.strokeStyle = "yellow";
    //下一个点坐标
    ctx.lineTo(300, 200);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(300, 200);
    ctx.strokeStyle = "red";
    ctx.lineTo(500, 100);
    //将上面的坐标用一条线连起来
    ctx.stroke();
  </script>
  • 效果：

image.png

四、画一个三角形

  • closePath() 闭合
<style>
    /* 给画布添加一个边框 */
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <!-- 通过 width height 给画布添加宽高 注意不要带单位 -->
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    //获取canvas
    let canvas = document.querySelector("canvas");
    //canvas上下文环境对象
    let ctx = canvas.getContext("2d");

    //开辟一个新的路径
    ctx.beginPath();
    ctx.moveTo(200, 300);
    ctx.lineTo(300, 300);
    ctx.lineTo(300, 100);
    // ctx.lineTo(200,300)
    //闭合
    ctx.closePath();
    //连级点与点的一条线
    ctx.stroke();
  </script>

image.png

五、水平方向文字对齐

  • font("字体大小，字体")
  • X轴 textBaseline("字体对齐方向") top,bottom,middle
  • fillText('文字'，X轴坐标，Y轴坐标)
<style>
    canvas {
      border: 1px dotted;
    }
  </style>
  <body>
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");

    ctx.moveTo(0, 100);
    ctx.lineTo(600, 100);
    ctx.stroke();
    //基线对齐
    ctx.font = "60px 微软雅黑"; //设置字体大小 字体
    ctx.textBaseline = "top"; //上对齐 //设置 文字 对齐 方式
    ctx.textBaseline = "bottom"; //下对齐 //设置 文字 对齐 方式
    ctx.textBaseline = "middle"; //中间对齐 //设置 文字 对齐 方式
    ctx.fillText("Hello Word", 100, 100); //设置文字 ，x ， y 位置
  </script>

image.png

六、垂直方向对齐

  • textAlign("文字对齐方向") left、right、center
  <style>
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");

    ctx.moveTo(200,0)
    ctx.lineTo(200,600)
    ctx.stroke()

    ctx.font = "60px 宋体"

    ctx.textAlign="left" //左对齐
    ctx.textAlign="right" //右对齐
    ctx.textAlign = "center" //中间对齐


    ctx.fillText('Hello Word',200,200)
  </script>

image.png

七、移动的盒子

<style>
    canvas {
      border: 1px dashed;
    }
  </style>
  <body>
    <canvas width="500" height="600"></canvas>
  </body>
  <script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");


    // ctx.fillRect(0, 0, 100, 100);

    let x = 0;
    let y = 0;

    let a = 10;
    let b = 1;

    let timer = setInterval(() => {
      ctx.clearRect(x, y, 50, 50);
      x += a;
      y += b;
      ctx.fillRect(x, y, 50, 50);
      if (x >= 450 || x <= 0) {
        a *= -1;
      }
      if (y >= 550 || y <= 0) {
        b *= -1;
      }
    }, 10);
    ctx.fillStyle = "skyblue";
  </script>

move.gif

avatar
文章
阅读
粉丝