学习canvas（一些常用api）

当然，以下是这些常用Canvas API的总结，按照Markdown格式编写：

常用Canvas API总结

1. 获取绘图上下文

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 或 'webgl'

2. 绘制矩形

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100); // 填充矩形

ctx.strokeStyle = 'red';
ctx.strokeRect(20, 20, 150, 100); // 描边矩形

ctx.clearRect(30, 30, 50, 50); // 清除矩形区域

3. 绘制路径

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 150, 75, 0, Math.PI * 2, true);
ctx.fill();

4. 绘制文本

ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 50);

ctx.strokeStyle = 'blue';
ctx.strokeText('Hello Canvas', 50, 100);

5. 绘制图像

const img = new Image();
img.onload = function() {
    ctx.drawImage(img, 10, 10, 100, 100); // 绘制图像
}
img.src = 'path/to/image.jpg';

6. 坐标变换

ctx.translate(50, 50); // 平移
ctx.rotate(Math.PI / 4); // 旋转
ctx.scale(2, 2); // 缩放

ctx.fillRect(0, 0, 100, 100);

7. 渐变

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

8. 阴影

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

9. 导出Canvas内容

const dataURL = canvas.toDataURL('image/png');
const button = document.getElementById('saveButton');
button.addEventListener('click', () => {
    canvas.toBlob((blob) => {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'canvas_image.png';
        link.click();
        URL.revokeObjectURL(link.href);
    }, 'image/png');
});

10. 测量文本

ctx.font = '30px Arial';
const metrics = ctx.measureText('Hello Canvas');
console.log(`Text width: ${metrics.width}px`);

11. 创建图案

const img = new Image();
img.onload = function() {
    const pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, 500, 500);
}
img.src = 'path/to/pattern.jpg';

12. 虚线

ctx.setLineDash([5, 15]);  // 虚线样式 [线条长度, 间隙长度]
ctx.lineDashOffset = 10;   // 虚线的偏移量
ctx.strokeRect(50, 50, 200, 200);

13. 剪切区域

ctx.beginPath();
ctx.arc(100, 100, 75, 0, Math.PI * 2, true);
ctx.clip();

ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 200, 200);  // 只有在圆形区域内的部分会被绘制

14. 检测点是否在路径或描边内

ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.stroke();

console.log(ctx.isPointInPath(75, 75));  // true
console.log(ctx.isPointInStroke(75, 75)); // false

15. 设置全局透明度

ctx.globalAlpha = 0.5;
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

16. 设置组合操作

ctx.globalCompositeOperation = 'destination-over';  // 绘制在已有内容下面
ctx.fillStyle = 'yellow';
ctx.fillRect(100, 100, 100, 100);

17. 绘制焦点环

const button = document.createElement('button');
document.body.appendChild(button);
button.focus();
ctx.drawFocusIfNeeded(button);

18. 读取和写入像素数据

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
    imageData.data[i] = 255 - imageData.data[i];     // 反转红色
    imageData.data[i+1] = 255 - imageData.data[i+1]; // 反转绿色
    imageData.data[i+2] = 255 - imageData.data[i+2]; // 反转蓝色
}
ctx.putImageData(imageData, 0, 0);

19. 创建空白ImageData对象

const newImageData = ctx.createImageData(100, 100);
for (let i = 0; i < newImageData.data.length; i += 4) {
    newImageData.data[i] = 255;  // Red
    newImageData.data[i+1] = 0;  // Green
    newImageData.data[i+2] = 0;  // Blue
    newImageData.data[i+3] = 255; // Alpha
}
ctx.putImageData(newImageData, 50, 50);

20. 保存和恢复Canvas状态

ctx.save();  // 保存当前状态

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.restore();  // 恢复到保存时的状态
ctx.fillRect(150, 10, 100, 100); // 这个矩形将会使用之前的状态

21. 线条末端和连接处样式

ctx.lineWidth = 10;

ctx.lineCap = 'round';  // 设置线条末端样式：butt, round, square
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

ctx.lineJoin = 'bevel';  // 设置线条连接处样式：bevel, round, miter
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 150);
ctx.lineTo(100, 200);
ctx.stroke();

22. 绘制圆弧连接的直线

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.arcTo(150, 50, 150, 150, 50); // 从(50,50)到(150,50)，再到(150,150)，圆弧半径为50
ctx.stroke();

23. 绘制贝塞尔曲线

ctx.beginPath();
ctx.moveTo(50, 250);
ctx.quadraticCurveTo(150, 200, 250, 250); // 二次贝塞尔曲线，控制点为(150,200)，终点为(250,250)
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, 350);
ctx.bezierCurveTo(150, 300, 250, 400, 350, 350); // 三次贝塞尔曲线，控制点为(150,300)和(250,400)，终点为(350,350)
ctx.stroke();

这些API涵盖了Canvas在绘图、动画、图像处理、路径操作等方面的广泛应用。在企业级应用中，熟练掌握和灵活运用这些API可以大大提高图形处理和用户界面设计的效率和质量。