当然，以下是这些常用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可以大大提高图形处理和用户界面设计的效率和质量。
