canvas的基本了解

  • canvas仅仅只是一个画布,定义一个canvas标签,需要通过属性,属性,属性来设置宽度高度(不可以通过样式!),如果不设置默认300*150

    • 不通过属性设置画布的宽度和高度,会造成坐标不准确的问题!

  • canvas必须要通过js来操作

  • canvas的坐标是从左到右是x轴,从上到下是y轴

  • vscode书写canvas的时候没有提示,加上/** @type {HTMLCanvasElement} */

    1
    2
    3
    4
    <script>
    /** @type {HTMLCanvasElement} */
     canvas代码书写
    </script>

canvas的基本步骤

  1. 获取canvas的节点
  2. 画布创建画笔并选择画笔的绘制类型
  3. 开始绘制
  4. store()方法绘制 —— stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
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
<canvas id="cav" height="400" width="400"></canvas>
 <script>
      /** @type {HTMLCanvasElement} */
     //1.获取canvas节点(获取画布)
     var canvas = document.getElementById("cav");
     //2.画布创建画笔并选择画笔的绘制类型
     var ctx = canvas.getContext("2d");
     //3.开始绘制
         //绘制的起点
     ctx.moveTo(100,100);
         //有了绘制的起点我们就拖动着笔移动到100,200的坐标点
     ctx.lineTo(100,200);
         //我们再次移动画笔的坐标
     ctx.lineTo(200,300);
         //第一个坐标(100,100)和最后一个坐标(200,300)点闭合
     ctx.closePath();
         //设置填充颜色 - 红色
     //ctx.fillStyle = "red";
         //开始填充颜色
     //ctx.fill();
         //设置绘制线条的颜色
     //ctx.strokeStyle = "yellow";
         //设置绘制线条的粗细
     //ctx.lineWidth = "20";
         //绘制线条
     ctx.stroke();
 </script>

  1. 绘制效果绘制效果

  2. 如果想要填充的颜色,画笔可以设置fillStyle指明颜色并且调用fill()方法进行填充

    1
    2
    3
    4
    //设置填充颜色 - 红色
    ctx.fillStyle = "red";
    //开始填充
    ctx.fill();
    绘制效果

  3. 设置线条的颜色

    1
    2
    3
    4
    //设置绘制线条的颜色
    ctx.strokeStyle = "yellow";
    //设置绘制线条的粗细
    ctx.lineWidth = "20";
    绘制效果

canvas绘制矩形和圆

绘制矩形

  • 画笔使用storeRect()方法
  • 画笔使用fillRect()方法
1
2
3
4
5
6
7
8
9
var cav = document.getElementById("cav");
var ctx = cav.getContext("2d");
ctx.beginPath();
//绘制线框矩形四个参数分别为 x,y,width,height
ctx.strokeRect(100,100,150,200);
	//绘制填充矩形
	//设置填充颜色
ctx.fillStyle = 'red';
ctx.fillRect(300,100,150,200);

绘制圆

  • 画笔使用arc()方法

    • ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    • X,Y,radius分别是横坐标,纵坐标,半径

    • startAngle: 圆弧的起点,x轴方向开始计算,单位以弧度表示

      • (1弧度等于57度左右) 因为2PI弧度=360所以1弧度=57度
      • 所以绘制一个圆直接起始弧度为0,终点弧度为2*Math.PI即可

    • endAngle:圆弧的终点,单位以弧度表示

    • anticlockwise:可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

      • 注意,是绘制,绘制,绘制!,比如其他参数相同,唯独最后一个参数不同,那么图形是完全不同的

      • 如图 ctx.arc(50,50,25,0,1,false);顺时针和逆时针绘制效果

        绘制效果
1
2
3
4
5
6
var cav2 = document.getElementById('cav2');
var ctx = cav2.getContext("2d");
ctx.beginPath();
//绘制圆 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.arc(50,50,25,0,2*Math.PI,false);
ctx.stroke();

绘制字体

  • 画笔设置font属性可以设置字体的格式
  • 画笔调用fillText可以绘制字体
    • ctx.fillText(text, x, y, [maxWidth]);
    • text: 绘制的文本
    • x,y: 坐标
    • maxWidth: 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。
1
2
3
4
5
6
7
8
9
10
11
12
<canvas id="cav" height="400" width="400"></canvas>
<script>
     /** @type {HTMLCanvasElement} */
    //1.获取canvas节点(获取画布)
    var canvas = document.getElementById("cav");
    //2.画布创建画笔并选择画笔的绘制类型
    var ctx = canvas.getContext("2d");
    //绘制文字
        //设置绘制文字字体
    ctx.font = "20px 黑体"
    ctx.fillText("叫我将军大人",10,20);
</script>
绘制效果

清空画步和清除指定区域

  • 均使用画笔当中的clearRect方法,只是传入的值有所区别
  • ctx.clearRect(x, y, width, height);
    • X,Y: 开始清空的坐标
    • width: 清空的宽度
    • height: 清空的高度

清空画布

  • ctx.clearRect(0,0,画布的宽度,画布的高度);

清除指定区域

  • ctx.clearRect(0,0,40,50)

  • 效果

    绘制效果

canvas绘制一个柱形图

效果

柱形图效果

代码

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="cav" height="600" width="800"></canvas>
    <style>
        #cav{
            border: 1px solid red;
        }
    </style>
    <script>
         /** @type {HTMLCanvasElement} */
        //1.获取canvas节点(获取画布)
        var canvas = document.getElementById("cav");
        //2.画布创建画笔并选择画笔的绘制类型
        var ctx = canvas.getContext("2d");
        //设置线条粗细
        ctx.lineWidth = "2";
        //设置字体
        ctx.font = "20px 黑体"
        //绘制坐标轴先
            //y坐标
        ctx.fillText("数据可视化",0,40);
        ctx.moveTo(40,40);
        ctx.lineTo(40,480)
            //150字体
            ctx.moveTo(40,80);
            ctx.lineTo(20,80);
        ctx.fillText("150",10,80);
             //120字体
            ctx.moveTo(40,160);
            ctx.lineTo(20,160);
        ctx.fillText("120",10,160);
            //90字体
            ctx.moveTo(40,240);
            ctx.lineTo(20,240);
        ctx.fillText("90",20,240);
             //60字体
            ctx.moveTo(40,320);
            ctx.lineTo(20,320);
        ctx.fillText("60",20,320);
              //30字体
            ctx.moveTo(40,400);
            ctx.lineTo(20,400);
        ctx.fillText("30",20,400);
             //0字体
             ctx.moveTo(40,480);
            ctx.lineTo(20,480);
        ctx.fillText("0",20,480);

            //x坐标
        ctx.moveTo(40,480);
        ctx.lineTo(680,480);
            //竖线1
        ctx.moveTo(200,480)
        ctx.lineTo(200,500);
        ctx.fillText("食品",100,500);
            //竖线2
        ctx.moveTo(360,480)
        ctx.lineTo(360,500);
        ctx.fillText("数码",260,500);
             //竖线3
        ctx.moveTo(520,480)
        ctx.lineTo(520,500);
        ctx.fillText("服饰",420,500);
        ctx.fillText("箱包",580,500);
        ctx.stroke();
        
        //绘制矩形
        //设置填充矩形颜色
        ctx.fillStyle = 'hotpink';
            //食品矩形
        ctx.fillRect(80,320,80,160);
            //数码矩形
        ctx.fillRect(240,280,80,200);
            //服饰矩形
        ctx.fillRect(400,240,80,240);
            //箱包矩形
        ctx.fillRect(560,0,80,480);

    </script>   
</body>

</html>

过程图

过程图