canvas 学习笔记

耶耶as

已于 2022-07-15 09:58:32 修改

阅读量234

点赞数 1

分类专栏：前端 canvas 文章标签：学习 javascript 前端

于 2022-07-14 18:10:12 首次发布

本文链接：https://blog.csdn.net/ASIYAas/article/details/125788961

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

今天学了canvas ，虽然学习的时间不多，但收获还是蛮大的~
赶紧记下来，备后期忘了过来看看回忆回忆啦

canvas基础

在学习canvas的过程中意识到，主要是对坐标系有印象，会用坐标系就好学

canvas 元素
（虽然以前在项目中使用过，但当时没怎么去看这些内容的。）
有时候可能您的浏览器版本过低，浏览器无法渲染出 canvas ，那这个时候可以升级浏览器或者使用chrome打开。
写 canvas 样式的时候注意：左右居中使用 --> display:block;

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

绘制直线

官方给出的固定的渲染上下文的代码：

    // 获取指定的canvas 元素
      var canvas = document.getElementById("canvas")
      //  调用 canvas 元素的 getContext 方法访问获取2d渲染上下文  (这个方法是固定的)
      var context = canvas.getContext("2d")

画一条直线：

 // 开启一条路径 （）
      context.beginPath()
      // 确定起始点
      context.moveTo(120, 100)
      //  确定结束点， 到哪去
      context.lineTo(300, 100)
      // 在上色签设置颜色和线宽
      //   context.strokeStyle = "red"
      //  设置线宽
      //   context.lineWidth = 5
      //  进行上色
      context.stroke()
      //  关闭路径
      context.closePath()

效果如下：
在这里插入图片描述

绘制虚线

来个完整的代码~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      canvas {
        margin: 0 auto;
        border: 1px solid #000000;
        border-radius: 5px;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"> </canvas>
    <script>
      var canvas = document.getElementById("canvas")
      var context = canvas.getContext("2d")
      context.fillStyle = "green"
      for (var i = 0; i < 30; i++) {
        drawLine(100 + 10 * i, 100, 105 + 10 * i, 100, "purple", 2)
      }
      function drawLine(x1, y1, x2, y2, color, width) {
        context.beginPath()
        context.moveTo(x1, y1)
        context.lineTo(x2, y2)
        context.strokeStyle = color
        context.lineWidth = width
        context.stroke()
        context.closePath()
      }
    </script>
  </body>
</html>

效果：
在这里插入图片描述

绘制圆

         arc(x, y, radius,startAngle,endAngle,counterclockwise)
        x，y： 描述弧的圆形的圆心的坐标。
        radius： 描述弧的圆形的半径。 
        startAngle，endAngle
        沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
        沿着X轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
        counterclockwise： 弧沿着圆周的逆时针方向(TRUE)还是顺时针方向
        (FALSE)遍历。

      context.arc(250, 250, 70, 0, Math.PI * 2, false)
      // // 填充
      // context.fillStyle = "pink"
      // context.fill()

      context.lineWidth = 3
      // context.strokeStyle = "purple"
      context.stroke()

效果：

填充后的效果：
在这里插入图片描述

绘制圆弧

画圆弧跟画圆的原理是一样的，画圆弧时只是把弧度调一下就好
note: 如果要写多个圆弧时，要注意的是不能遗漏 beginPath()
直接写两个 ARC ，不写 beginPath 的话会自动补上两个图形的连接的线，所以要写beginPath， closePath 可以不写，因为系统会默认第二个beginPath 前面有closePath。

   context.beginPath()
      context.arc(300, 100, 100, 0, Math.PI, false)
      context.strokeStyle = "blue"
      context.stroke()

绘制矩形

矩形：
* rect(x,y,width,height); 绘制矩形
* x: 矩形左上角的 x 坐标
* y: 矩形左上角的 y 坐标
* width:矩形的宽度，以像素计
* height：矩形的高度，以像素计


```javascript
      context.rect(100, 100, 200, 100)
      // step1:  填充
      context.fillStyle = "red"
      context.fill()
      // step:   描边
      context.strokeStyle = "purple"
      context.lineWidth = 5
      context.stroke()
      /**
       * 如果需要描边和填充， 先填充， 再描边！
       */
      /**
       *   fillRect(x,y,width,height):  绘制实心矩形
       *   strokeRect(x,y,width,height) ： 绘制空心矩形
       */
      context.fillStyle = "pink"
      context.fillRect(100, 220, 200, 100)
      context.strokeStyle = "skyblue"
      context.lineWidth = 5
      context.strokeRect(100, 340, 200, 100)
      // context.fill();

效果：
在这里插入图片描述

绘制一杯热水

    // 获取指定的canvas 元素
      var canvas = document.getElementById("canvas")
      //  调用 canvas 元素的 getContext 方法访问获取2d渲染上下文  (这个方法是固定的)
      var context = canvas.getContext("2d")
      //  杯子本身
      context.fillStyle = "pink"
      context.fillRect(100, 200, 200, 200)
      context.strokeStyle = "blue"
      context.lineWidth = 4
      context.strokeRect(100, 200, 200, 200)
      // 画把手
      drawCircle(300, 300, 50, 10, false, "purple")
       // 画上面的水蒸气
      for (var i = 0; i < 4; i++) {
        drawCircle(130 + 40 * i, 120, 20, 1, true, "gray")
        drawCircle(130 + 40 * i, 160, 20, 1, false, "gray")
      }
      function drawCircle(x, y, r, width, flag, color) {
        context.beginPath()
        context.arc(x, y, r, -Math.PI / 2, Math.PI / 2, flag, color)
        context.lineWidth = width
        context.strokeStyle = color || "#000"
        context.stroke()
      }

效果：

绘制随机统计图

矩形图的随机颜色的实现是，使用两种方法都可以的，有兴趣可以换着试试~

      //  step1: 画直线
      drawLine(100, 100, 100, 400, "black", 2)
      drawLine(100, 400, 400, 400, "black", 2)
      function drawLine(x1, y1, x2, y2, color, width) {
        context.beginPath()
        context.moveTo(x1, y1)
        context.lineTo(x2, y2)
        context.strokeStyle = color
        context.lineWidth = width
        context.stroke()
        context.closePath()
      }
      //  画矩形
      for (var i = 0; i < 7; i++) {
        var height = Math.random() * 280 + 10
        // context.fillStyle = "#" + parseInt((Math.random() * 0x1d82e7).toString(16))
        //  RGB 形式
        context.fillStyle =
          "rgb(" +
          parseInt(Math.random() * 256) +
          "," +
          parseInt(Math.random() * 256) +
          "," +
          parseInt(Math.random() * 256) +
          ")"
        context.fillRect(120 + 40 * i, 400 - height, 20, height)
      }