likes
comments
collection
share

canvas使用基础，画个缓冲器先

作者站长头像
站长
· 阅读数 39

前言

Canvas是HTML5中的一个元素，用于在网页上绘制图形、动画和其他可视化效果。 它提供了一个类似于画布的区域，可以通过JS来操作和绘制内容。今天我们就来了解canvas的基础用法，画个缓冲器先~

正文

创建canvas

<canvas>标签来创建Canvas元素，可以设置其宽度和高度来确定绘图区域的大小

 <canvas width="500" height="500" id="myCanvas"></canvas>

就算不设置也会有默认宽高，300x300

基本用法

一，绘制矩形

  • canvas创建画布
  • getContext()方法获取Canvas的上下文
  • strokestyle()绘制矩形
  • strokeRect()描边，传入左上角x,y坐标和矩形的宽高
  • clearRect()清除矩形中的区域

绘制矩形传入参数接收绘制的起始坐标x,y和矩形的宽高四个参数。

<body>
  <canvas id="canvas"></canvas>

  <script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");

    ctx.fillRect(0, 0, 100, 100)//绘制矩形（坐标从x,y到x,y）
    ctx.strokestyle = 'red';
    ctx.strokeRect(0, 0, 101, 101);//描边

    ctx.clearRect(0, 0, 50, 50);//清除区域

  </script>
</body>

最后形成的图像如下 canvas使用基础，画个缓冲器先

二，绘制圆形

  • canvas创建画布
  • getElementById得到canvas的dom结构进行操作
  • getContext("2d")获取后渲染上下文，使用2d作为参数
  • beginPath()开始一个路径的描述
  • arc()绘制一个圆，依次传入圆心(x,y);半径;起始和终止弧度
  • fillStyle()如果想填充这个圆形，需要提前传入你想要填充的颜色
  • fill()填充这个圆

清除圆形内区域

  • beginPath()开始一个路径
  • arc()绘制一个圆形
  • lineWidth()设置这个圆弧的粗细，形成圆环效果
  • strokeStyle()设置圆环的颜色
  • stroke()运行这个路径，实际绘制这个图形的轮廓
<body>
    <canvas id="canvas"></canvas>

    <script>
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");

        ctx.beginPath();//开始一个路径的描述
        ctx.arc(150, 75, 50, 0, 2 * Math.PI,)
        //圆心x,y;半径;圆的起始弧度，终止弧度
        ctx.fillStyle = 'red';
        ctx.fill();//填充

        ctx.beginPath();
        ctx.arc(150, 75, 30, 0, 2 * Math.PI);
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 6;
        ctx.stroke();//描边
    </script>
</body>

所作图像如下 canvas使用基础，画个缓冲器先

三，绘制加载进度圆

要绘制一个加载进度圆主要有两步

  • 绘制一个圆
  • 让这个圆动起来

1.绘制圆

相信我们已经烂熟于心，有的大佬已经可以3s就给你敲出一个圆来

  • 设置一个画布
  • 拿到画布的dom结构
  • 以2d作为参数渲染上下文
  • 设置圆心的中点为画布的中点
  • 开始绘画路径
  • 绘画风格-颜色为黑
  • 画笔粗细为5
  • 确定这个圆的圆心为xy，半径为50，从0开始画，弧度为2PI
  • 正式开始绘制这个圆
<body>
    <canvas id="canvas"></canvas>

    <script>
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let centerX = canvas.width / 2;
        let centerY = canvas.height / 2;
  
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 5;
        ctx.arc(centerX, centerY, 50, 0, Math.PI * 2);
        ctx.stroke();
    </script>
</body>

2.让这个圆动起来

如何让这个圆动起来？我们需要定义一个函数，当输入一个参数时这个函数就会逐步开始画圆。画圆？不就是我们上面绘制的这个圆吗，当这个函数不被调用时就不绘制这个圆。而且为了使圆不断被绘制，我们还需要用到定时器 所以我们要做的有三步

  1. 构造一个画圆函数，打造这个个方法：接收一个参数开始画圆形以此来代表用户启动一个程序时的加载进度
  2. 定义变量，将这个变量和函数的参数统一
  3. 使用一个定时器，在定时器中调用这个函数
 let rad = Math.PI * 2 / 10;
    let speed = 0.1
    
        function circle(n) {
        //////////////////
         ctx.arc(centerX, centerY, 50, 0, n * rad);
         /////////////////
        }
        
         setInterval(() => {
                circle(speed)
                speed += 0.05;//让n不断增加
            }，100)

如上片段

  • 我们新定义了一个变量 rad和 speed将他们和画圆函数统一
  • 使用定时器 setInterval() ,这个定时器会重复执行某个函数或代码块。我们将speed放在这个定时器中，每隔100ms这个函数中的 arc() 就会运作一次

3.优化

  • 我们可以在html部分自己定义画布的大小和背景颜色；
  • 为了使代码在画圆过程中数据不会丢失，我们需要加上save()和restore()来保证：保存更新本地存储和快速恢复绘图状态，这是极其重要的；
  • 此外当let太多时我们可以用,来代替；来省略过多的let;
  • 使用window.onload包含你这个方法；window.onload 事件通常用于确保在 DOM完全加载并解析完成后执行 JS 代码。这是很重要的，因为如果我们在 DOM 元素加载之前访问或修改它们，可能会导致错误或不可预测的行为。

所以最后，加载进度圆被我们成功绘制

 <canvas id="canvas" width="500" height="500" style="background-color: black;"></canvas>

window.onload = function () {
    let canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d')
    centerX = canvas.width / 2
    centerY = canvas.height / 2
    rad = Math.PI * 2 / 10
    speed = 0.1

    //绘制圆环，打造一个方法：画圆的方法，接收一个参数开始画圆形以此来代表用户启动一个程序时的加载进度
    function circle(n) {
      ctx.save();//用于保存，更新和本地储存
      ctx.beginPath();
      ctx.strokeStyle = 'white';
      ctx.lineWhith = 5;
      ctx.arc(centerX, centerY, 100, 0, n * rad);
      ctx.stroke();
      ctx.closePath();  // 结束路径
      ctx.restore();//恢复修复；和save方法同用，他们用于在Canvas的绘图状态堆栈中保存和恢复绘图状态

    }

    //接收一个回调函数
    setInterval(() => {
      circle(speed)//调用画圆函数，传入速度，使用定时器，100ms执行一次该速度
      speed += 0.1
    }, 100)
  }
转载自:https://juejin.cn/post/7382868373883191296
评论
请登录