由于图片上传有些问题，如要查看图片效果，请前往CSDN，链接：https://blog.csdn.net/qq_44363897/article/details/99683881

canvas简介

  1. canvas是 HTML5 提供的一种新标签.
  2. 语法:
    1
    <canvas> </canvas>
  3. canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画,控制其每一个像素.
  4. canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
  5. canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas主要应用领域

  1. 游戏开发
  2. 可视化数据：数据图表化
  3. banner广告
  4. 图形编辑器：Photoshop 图形编辑器将能够 100%基于 Web 实现。
  5. 网页特效.

canvas初步使用

  1. 可以为canvas设置 width 和 height 属性，但是属性值单位必须是 px，否则忽略
  2. width 和 hegiht：默认 300*150 像素
  3. 不要用 CSS 控制它的宽和高,会走出图片拉伸，一般直接设置为内联样式或者利用js设置。
  4. 重新设置 canvas 标签的宽高属性会让画布擦除所有的内容
  5. 可以给 canvas 画布设置背景色.

canvas的兼容性

  1. ie9 以上才支持 canvas, 其他 chrome、ff、苹果浏览器等都支持
  2. 只要浏览器兼容 canvas，那么就会支持绝大部分 api(个别最新 api 除外)
  3. 移动端的兼容情况非常理想，基本上随便使用
  4. 2d 的支持的都非常好，3d（webgl）ie11 才支持，其他都支持
  5. 如果浏览器不兼容，最好进行友好提示,如下：
    1
    2
    3
    <canvas id="can">
      你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
    </canvas>

    canvas绘制上下文

  6. canvas 的绘图是使用 JavaScript 操作的。
  7. Context 对象就是 JavaScript 操作 Canvas 的接口
  8. 使用[CanvasElement].getContext(‘2d’)来获取 2D 绘图上下文,使用[CanvasElement].getContext(‘webgl’)来获取 3D 绘图上下文
    1
    2
    var canvas = document.getElementById('can'); //获得画布
    var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl

    canvas坐标系

  9. canvas坐标系，从左上角（0,0）开始，x向右增大，y向下增大。
    坐标系

设置绘制起点

  1. 使用moveTo(x , y)方法来设置起点，即画笔的初始位置
  2. x , y都是相对于canvas盒子的左上角的
  3. 语法：
    1
    2
    var ctx = canvas.getContext('2d');
    ctx.moveTo(x,y);

    绘制直线

  4. 使用lineTo(x,y)方法来绘制直线
  5. x , y 表示直线的起点，即指从x,y的位置绘制一条直线到起点或者上一个线头点。
  6. 语法：
    1
    2
    var ctx = canvas.getContext('2d');
    ctx.lineTo(x,y);

    路径的开始与闭合

  7. 开始路径：ctx.beginPath( )方法
    • 如果是绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开
    • beginPath: 核心的作用是将 不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理
  8. 闭合路径：ctx.closePath( )方法：闭合路径会自动把最后的线头和开始的线头连在一起。

描边

  1. 语法：ctx.stroke( )
  2. 次方法可以使绘制的图像真正显示在浏览器窗口，路径只是草稿，真正绘制线必须执行stroke

canvas 绘制的基本步骤

  1. 第一步：利用DOM获得canvas标签,获得后可以设置其宽高
  2. 第二步：获得上下文：canvasElem.getContext(‘2d’);
  3. 第三步：开始路径规划 :ctx.beginPath( )
  4. 第四步：设置起始点：ctx.moveTo(x, y)
  5. 第五步：绘制线条：ctx.lineTo(x, y)，之后可以设置描边的样式，如颜色等(详见案例)。
  6. 第六步：闭合路径(ctx.closePath( ))及描边或者描边(ctx.stroke( ))

填充

  1. 语法：ctx.fill( )
  2. 将闭合的路径的内容填充具体的颜色。默认黑色

案例

  1. 案例1：红色的闭合三角形

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <canvas id="demo" width="600px" height="600px">
            你的浏览器不支持canvas,请升级
    </canvas>
    <script>
        //拿到canvas标签
        var canvas = document.getElementById("demo");
       //拿到canvas的上下文
       var tex = canvas.getContext("2d");
       //绘制
       tex.moveTo(100,100);//把画笔移动到100,100处
       tex.lineTo(200,100);//从画笔的位置画一条直线到200,100处
       tex.lineTo(100,200);//在200,100处画一条线到100,200处
       //tex.lineTo(100,100);
       tex.closePath();//闭合路径，与tex.lineTo(100,100)作用相同
       //设置线宽
       tex.lineWidth = 4;
       //展现路线
       tex.strokeStyle = "blue";//设置描边样式
       tex.stroke();//描边
       //填充
       tex.fillStyle = "red";//设置填充颜色
       tex.fill();
    </script>

  2. 案例2：折线图

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <canvas id="ideo"> 
         你的浏览器不支持canvas,请升级浏览器
    </canvas>

    <script>
     	var canvas = document.getElementById("ideo");
        var tex = canvas.getContext("2d");
        //设置画布的宽高以及边框样式
        canvas.width = 1000;
        canvas.height = 500;
        canvas.style.border = "1px solid blue";
        tex.moveTo(100,400); //起始点即原点
        tex.lineTo(800,400); //x轴
        tex.lineTo(790,410); //x轴下半部分的箭头
        tex.moveTo(800,400); //设置画笔到该点
        tex.lineTo(790,390); //x轴上半部分箭头
        tex.strokeStyle = "red"; //设置x轴的颜色为红色
        tex.stroke();//描边
        tex.beginPath();//开启一个新状态
        tex.moveTo(100,400); //起始点即原点
        tex.lineTo(100,50); //y轴
        tex.lineTo(110,60); //y轴右半部分箭头
        tex.moveTo(100,50); //设置画笔到该点
        tex.lineTo(90,60); //设置y轴左半部分箭头
        tex.strokeStyle = "red"; //设置y轴的颜色为红色
        tex.stroke(); //描边
        tex.beginPath(); //开启一个新状态
        tex.moveTo(100,400); //画笔回到起始原点
        //以下为点的坐标,可以任意设置
        tex.lineTo(150,250);
        tex.lineTo(250,150);
        tex.lineTo(600,150);
        tex.lineTo(750,80);
        //描边样式
         tex.strokeStyle = "green";
         tex.stroke();
    </script>

本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除。