canvas 基本介绍

# canvas 基本功能介绍

- canvas 能做什么

1. 绘制简单图形线条

2. 裁剪图片

- 开始绘制画布

新建html文档添加 canvas标签

```html

<div style="position: relative;">

    <canvas id="canvas" width="800" height="800"></canvas>

</div>

```

注：canvas 标签初始化是 width 和 height 就是固定值，后期修改会导致 canvas 中绘图部分失败

```javascript

<script>

    // 获取 canvas 标签

    const canvas = document.getElementById('canvas');

    const cxt = canvas.getContext('2d');

    const w = canvas.width;

    const h = canvas.height;

   

    // strokeRect(x, y, width, height) 边框填充

    // 绘制边框 颜色 rgba(23,0,0, .6) 启点坐标 x: 0 y: 0 width: w height: h

    cxt.fillStyle = 'rgba(23,0,0, .6)';

    cxt.strokeRect(0, 0, w, h);

   

    // fillRect(x, y, width, height) 内部填充

    // 绘制内部填充图形 颜色 rgb(0,0,0) 启点坐标 x: 0 y: 0 width: 30 height: 30

    cxt.fillStyle = 'rgb(0,0,0)';

    cxt.fillRect(0, 0, 30, 30);

    cxt.fillStyle = 'rgb(255,200,200)';

    cxt.fillRect(30, 30, 30, 30);

    // 绘制图形开始路径

    cxt.beginPath();

    // 起始点

    cxt.moveTo(60, 60);

    // 第一个绘制点

    cxt.lineTo(90, 90);

    // 关闭路径

    cxt.closePath();

    // 绘制边框无内部填充图形

    cxt.stroke();

   

    cxt.beginPath();

    cxt.moveTo(5,90);

    cxt.lineTo(100, 90);

    cxt.lineTo(100, 120);

    cxt.lineTo(5,120);

    // 线条颜色

    cxt.strokeStyle = 'rgba(255, 231, 25, 1)';

    // 线条宽度

    cxt.lineWidth = 1;

    cxt.closePath();

    cxt.stroke();

    // 绘制圆弧arc(圆心x, 圆心y, 半径：r, 开始弧度, 绘制弧度, 顺势真：false|逆时针：true)

    cxt.beginPath();

    cxt.strokeStyle = "rgba(255,255,0,0.5)";

    cxt.arc(600, 600, 50, 0, 2 * Math.PI, false)

    cxt.stroke()

    cxt.beginPath();

    cxt.strokeStyle = 'rgba(255, 231, 25, 1)';

    cxt.arc(150, 150, 30, 0, Math.PI * 2, false);

    // 线条虚线

    cxt.setLineDash([20, 5]);  // [实线长度, 间隙长度]

    cxt.lineDashOffset = -0;

   

    cxt.stroke();

    // 绘制文字

    cxt.font = "12px sans-serif";

    // 文字水平位置

    cxt.textAlign  = 'center';

    // 文字垂直位置

    cxt.textBaseline  = 'middle';

    // 实体文字

    cxt.fillText("天若有情", 150, 150);

    // 空心文字

    cxt.strokeText("天若有情", 10, 200)

    // 填充img

    const img = new Image();

   

    img.onload = function () {

        console.log('------------------')

        cxt.drawImage(img,300,0); // 正常加载

        cxt.drawImage(img,300,0, 300, 150); // 缩放

        cxt.drawImage(img,300,0, 300, 150, 400, 75, 50, 50); // 切片

        // 将canvas 保存成base64

        const imgs = canvas.toDataURL('image/png')

    console.log(imgs);

    }

    img.src = 'bee.883b429.jpg';

    // 移动 canvas

    // cxt.save(); //保存坐原点平移之前的状态

    // cxt.translate(100, 100);

    // cxt.strokeRect(0, 0, 100, 100)

    // cxt.restore(); //恢复到最初状态

    // cxt.translate(220, 220);

    // cxt.fillRect(0, 0, 100, 100)

    // cxt.save();

    // cxt.translate(200, 200);

    // cxt.strokeRect(0, 0, 20, 20);

    // cxt.restore();

    // cxt.translate(220, 220);

    // cxt.fillRect(0, 0, 100, 100)

    cxt.beginPath();

    cxt.strokeStyle = "rgba(255,255,0,0.5)";

    cxt.arc(600, 600, 50, 0, 2 * Math.PI, false)

    cxt.stroke()

   

</script>

```

注：加载img文件时，要等到img加载完成后才能绘制。所有和img绘制相关 放在img.loader 里面。

注：保存 base64 文件时要等到，canvas 内容全部加载完成后，才能全部保存，否侧只保存canvas加载内容。