🥩 简介

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

🍿 gif图片示例

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

🍔 起步

目前自己只学习到了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>

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

🥓相关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>

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

🥨相关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>

效果展示
在这里插入图片描述
🦪相关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.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为默认
# 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

CCE云原生混部场景下的测试案例

avatar 华为云开发者联盟
cover

详解数仓的3A安全能力

avatar 华为云开发者联盟