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