canvas 基本介绍

# canvas 基本功能介绍

- canvas 能做什么

1. 绘制简单图形线条

2. 裁剪图片

- 开始绘制画布

新建html文档添加 canvas标签

```html

</div>

```

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

```javascript

// 获取 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加载内容。

巴特西

canvas 基本介绍

最新文章

热门文章