canvas基本使用_canvas 黑体-CSDN博客

本文链接：https://blog.csdn.net/u014582342/article/details/124762273

文章目录

canvas的基本了解

canvas仅仅只是一个画布,定义一个canvas标签,需要通过属性,属性,属性来设置宽度高度(不可以通过样式!),如果不设置默认300*150
- 不通过属性设置画布的宽度和高度,会造成坐标不准确的问题!
canvas必须要通过js来操作
canvas的坐标是从左到右是x轴,从上到下是y轴
vscode书写canvas的时候没有提示,加上/** @type {HTMLCanvasElement} */
```
<script>
/** @type {HTMLCanvasElement} */
 canvas代码书写
</script>
```

canvas的基本步骤

获取canvas的节点
画布创建画笔并选择画笔的绘制类型
开始绘制
store()方法绘制 ------ stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

   <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>

绘制效果
如果想要填充的颜色,画笔可以设置fillStyle指明颜色并且调用fill()方法进行填充
```
//设置填充颜色 - 红色
ctx.fillStyle = "red";
//开始填充
ctx.fill();
```

设置线条的颜色

//设置绘制线条的颜色
ctx.strokeStyle = "yellow";
//设置绘制线条的粗细
ctx.lineWidth = "20";

canvas绘制矩形和圆

绘制矩形

画笔使用storeRect()方法
画笔使用fillRect()方法

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);顺时针和逆时针绘制效果

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属性可以设置字体的格式
- API
画笔调用fillText可以绘制字体
- ctx.fillText(text, x, y, [maxWidth]);
- text: 绘制的文本
- x,y: 坐标
- maxWidth: 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。

    <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绘制一个柱形图

效果

柱形图效果

代码

<!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>