前端 Canvas基础（一）【基本图形】

今天药忘吃喽~ 2024-05-04 08:14 74阅读 0赞

### ? 简介 ###

canvas \[ˈkænvəs\] ：画布  
这是一个HTML5新增的标签，使用这个标签我们可以通过JS在该标签中直接画出各种图形。这时，JS类似画家手中的画笔，canvas就相当于画家画笔下的画布。当然，如果只是画静态图，岂不是显得很low了，我们实际开发中用canvas比较多的肯定是用它做出来的各种动画。更多的介绍这里就不赘述了。下面我们看看在我自己开发网站中用到的一些canvas。

### ? gif图片示例 ###

很多的2D（2d）甚至3D（webgl）动画都靠它进行渲染。我们先看看两个图片例子吧(第一张登录页中使用了webgl【图片下面的蓝色波浪小点】，第二张主页使用的是2d，主要是鼠标以及背景的小球特效)  
![在这里插入图片描述][b1e451dd5b69499893e58e9a21df2ece.gif_pic_center]  
![在这里插入图片描述][d3b8a56d77ee4dc793bf23e94aee1f0d.gif_pic_center]

### ? 起步 ###

目前自己只学习到了2D方面的，3D的webgl这一块涉及的知识点比较多，难度相对于2D来说大了很多，只能是后期慢慢来了。

**全局变量**：context表示获取的canvas上下文（下文会用的比较多，所以提前声明一下），canvas表示JS获取的canvas元素

#### ?一、基础 ####

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            window.onload = function () {
          
                //1、获取canvas对象
                var cnv = document.getElementById("canvas");
                //2、获取上下文环境对象context
                var cxt = cnv.getContext("2d");
                //3、开始绘制图形
                cxt.moveTo(50, 100);
                cxt.lineTo(150, 50);
                cxt.strokeStyle = 'black'
                cxt.stroke();
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">您的浏览器不支持画布标签，请更换浏览器，建议使用GoogleChrome</canvas>
    </body>
    </html>

**效果图**  
![在这里插入图片描述][5f5254d229da47d3b8a27aae14ad41e0.png]

**?相关API**

- canvas.getContext('2d') //获取canvas上下文
    - context.moveTo(x,y) //开始移动位置
    - context.lineTo(x,y) //行动路线
    - context.strokeStyle = ‘color’ //线条颜色
    - context.stroke() //线条绘制

另外需要注意的是虽然大部分浏览器已经支持canvas了，但是也不排除有的不支持，因此我们可以在canvas标签中写上提示 的文字，如果浏览器不支持该标签，会将canvas标签当成普通标签渲染。另一个需要注意的地方是我们的canvas元素尽量不要使用style的像素值来定义宽高，建议使用canvas标签的width和height参数（如果不给 canvas 设置 widht、height 属性时，则默认 width为300、height 为 150）

//获取canvas上下文方法，接收一个字符串，一个为2d表示2d绘图，一个为webgl表示3d
    var cxt = canvas.getContext("2d");
    //开始移动的起点，两个参数分别表示X轴，Y轴的坐标点，下同
    cxt.moveTo(50, 100);
    cxt.lineTo(150, 50);//描述行动路径
    cxt.strokeStyle = 'black' //更改线条颜色
    //绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。通过cxt.strokeStyle可以更改颜色
    cxt.stroke();

#### ?二、图形（矩形、圆形、三角形…） ####

<!DOCTYPE html>
    <html>
    <head>
      <title>图形绘制</title>
      <meta charset="utf-8" />
      <script type="text/javascript">
        function $$(id) {
          
          return document.getElementById(id);
        }
        window.onload = function () {
          
          var cnv = $$("canvas");
          var cxt = cnv.getContext("2d");
          // 绘制三角形
          cxt.moveTo(50, 130);
          cxt.lineTo(150, 50);
          cxt.lineTo(150, 130)
          cxt.lineTo(50, 130)
          cxt.strokeStyle = 'purple'
          cxt.stroke();
          // 绘制红色边框矩形
          cxt.strokeStyle = "red";
          cxt.strokeRect(180, 50, 80, 80);
          // 绘制填充色为蓝色矩形
          cxt.fillStyle = 'blue';
          cxt.fillRect(300, 50, 80, 80)
          cxt.clearRect(320, 70, 40, 40)
          // 绘制圆形
          cxt.beginPath();
          cxt.strokeStyle = 'black'
          cxt.arc(450, 90, 40, 0, 2 * Math.PI);
          cxt.stroke();
          // 绘制多边形
          function createPolygon(cxt, n, dx, dy, size) {
          
            /*
             * n：表示n边形
             * dx、dy：表示n边形中心坐标
             * size：表示n边形的大小
             */
            cxt.beginPath();
            var degree = (2 * Math.PI) / n;
            for (var i = 0; i < n; i++) {
          
              var x = Math.cos(i * degree);
              var y = Math.sin(i * degree);
              cxt.lineTo(x * size + dx, y * size + dy);
            }
            cxt.closePath();
          }
          createPolygon(cxt, 6, 580, 80, 50);
          cxt.fillStyle = "skyblue";
          cxt.fill();
        }
      </script>
    </head>
    
    <body>
      <canvas id="canvas" width="700" height="200" style="border:1px dashed gray;"></canvas>
      
    </body>
    
    </html>

**效果图**  
![在这里插入图片描述][35acb0173e2e41dea2728d009779ffb9.png]

**?相关API（不包含已经介绍过的，下同）**

- context.strokeRect(left,top,width,height) // 绘制边框矩形，left表示距离左上侧的距离，top表示距离左上顶部的距离。width和height分别表示宽度和高度，下同
    - context.fillStyle = 'color' // 矩形颜色填充，color表示颜色，可以是HTML颜色值，可以通过rgba（）颜色值来设置透明度
    - context.fillRect(left,top,width,height) //绘制填充色矩形
    - context.beginPath() //创建一个开始路径
    - context.arc(x,y,radius,startAngle,endAngle,angleBoolean) // 绘制圆弧，画一个以（x，y）为圆心，以radius为半径的圆弧，从startAngle开始到endAngle结束，安装angleBoolean给定的方向进行绘制 （angleBoolean默认为false（表示顺时针））
    - context.closePaht() //结束绘制，封闭路径
    - context.fill() //进行绘图填充
    - context.clearRect(left,top,width,height) //在给定的位置以矩形形状清除绘图，参数表示同上
    - context.rect(left,top,width,height) //这也是canvas创建矩形的方法，参数表示同上

#### ?三、特殊图形（箭头、五角星、圆角矩形、线条） ####

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            function $$(id) {
          
                return document.getElementById(id);
            }
            window.onload = function () {
          
                var cnv = $$("canvas");
                var cxt = cnv.getContext("2d");
                // 绘制箭头
                cxt.strokeStyle = 'blue'
                cxt.moveTo(40, 60);
                cxt.lineTo(100, 60);
                cxt.lineTo(100, 30);
                cxt.lineTo(150, 75);
                cxt.lineTo(100, 120);
                cxt.lineTo(100, 90);
                cxt.lineTo(40, 90);
                cxt.lineTo(40, 60);
                cxt.stroke();
                // 绘制五角星
                cxt.beginPath();
                for (var i = 0; i < 5; i++) {
          
                    cxt.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * 50 + 250,
                               -Math.sin((18 + i * 72) * Math.PI / 180) * 50 + 80);
                    cxt.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * 25 + 250,
                               -Math.sin((54 + i * 72) * Math.PI / 180) * 25 + 80);
                }
                cxt.closePath();
                cxt.stroke();
    
                // 绘制圆角矩形
                cxt.moveTo(360, 20);
                cxt.lineTo(480, 20);
                cxt.arcTo(520, 20, 520, 40, 20);
                cxt.lineTo(520, 110);
                cxt.arcTo(520, 130, 360, 130, 20);
                cxt.lineTo(360, 130);
                cxt.arcTo(340, 130, 360, 20, 20);
                cxt.arcTo(340, 20, 360, 20, 20);
                cxt.stroke();
    
                // 线条
                cxt.lineWidth = 6;
                cxt.moveTo(570, 20);
                cxt.lineTo(730, 20);
                cxt.stroke();
                // 圆角线条
                cxt.beginPath();
                cxt.lineCap = "round";
                cxt.moveTo(570, 70);
                cxt.lineTo(730, 70);
                cxt.stroke();
                // 方角线条
                cxt.beginPath();
                cxt.lineCap = "square";
                cxt.moveTo(570, 120);
                cxt.lineTo(730, 120);
                cxt.stroke();
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="750" height="150" style="border:1px dashed gray;"></canvas>
    </body>
    </html>

**效果展示**  
![在这里插入图片描述][29d63161170548789af92b7060825e25.png]  
**?相关API**

- context.arcTo(x1,y1,x2,y2,r);//绘制圆弧。x1两切线交点的横坐标 。y1	两切线交点的纵坐标。x2	第二条切线上一点的横坐标。y2	第二条切线上一点的纵坐标。r 弧的半径
    - context.lineWidth = number  //number 线条宽度
    - context.lineCap = "square" | "round" | "butt"; //线条样式，分别是方角，圆角，默认样式（无）。

### ? 第一阶段总结 ###

第一阶段主要是对各种基础图形的绘制以及对主要相关基础API的学习。基本相当于是套公式还是比较轻松的，但是老子说过：“合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。”。基础的学习知识很重要，翅膀慢慢硬了才能飞的更远。

最后再把本节中所有的API放到一起，顺便附上菜鸟教程的：[canvas参考手册][canvas] 。方便下次查询

- canvas.getContext('2d') //获取canvas上下文
    - context.moveTo(x,y) //开始移动位置
    - context.lineTo(x,y) //行动路线
    - context.strokeStyle = ‘color’ //线条颜色
    - context.stroke() //线条绘制
    - context.strokeRect(left,top,width,height) // 绘制边框矩形，left表示距离左上侧的距离，top表示距离左上顶部的距离。width和height分别表示宽度和高度，下同
    - context.fillStyle = 'color' // 矩形颜色填充，color表示颜色，可以是HTML颜色值，可以通过rgba（）颜色值来设置透明度
    - context.fillRect(left,top,width,height) //绘制填充色矩形
    - context.beginPath() //创建一个开始路径
    - context.arc(x,y,radius,startAngle,endAngle,angleBoolean) // 绘制圆弧，画一个以（x，y）为圆心，以radius为半径的圆弧，从startAngle开始到endAngle结束，安装angleBoolean给定的方向进行绘制 （angleBoolean默认为false（表示顺时针））
    - context.closePaht() //结束绘制，封闭路径
    - context.fill() //进行绘图填充
    - context.clearRect(left,top,width,height) //在给定的位置以矩形形状清除绘图，参数表示同上
    - context.rect(left,top,width,height) //这也是canvas创建矩形的方法，参数表示同上
    - context.arcTo(x1,y1,x2,y2,r);//绘制圆弧。x1两切线交点的横坐标 。y1	两切线交点的纵坐标。x2	第二条切线上一点的横坐标。y2	第二条切线上一点的纵坐标。r 弧的半径
    - context.lineWidth = number  //number 线条宽度
    - context.lineCap = "square" | "round" | "butt"; //线条样式。butt为默认

--------------------

[b1e451dd5b69499893e58e9a21df2ece.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/102d57f7f24045bdbce7bb1e7fcfde55.gif
[d3b8a56d77ee4dc793bf23e94aee1f0d.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/5d149211b5b7467a843dcd2aa004a1ba.gif
[5f5254d229da47d3b8a27aae14ad41e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/fbaeb1085b994549b1fbb53ae22a1391.png
[35acb0173e2e41dea2728d009779ffb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/987574ccb7184d3a9acd7dd2524f5a24.png
[29d63161170548789af92b7060825e25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/9886b6c80e8f4825bf878b3085212598.png
[canvas]: https://www.runoob.com/tags/ref-canvas.html