function basicDrawing() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
ctx.beginPath();
ctx.arc(250, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.beginPath();
ctx.moveTo(350, 50);
ctx.lineTo(450, 150);
ctx.lineTo(350, 150);
ctx.closePath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.stroke();
ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('Canvas 绘制示例', canvas.width / 2, 30);
}
function canvasAnimation() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
let x = 0;
let y = canvas.height / 2;
let dx = 2;
let dy = 2;
const radius = 20;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'purple';
ctx.fill();
if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}
x += dx;
y += dy;
requestAnimationFrame(animate);
}
animate();
}
function canvasInteraction() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('mouseout', () => {
isDrawing = false;
});
}
function canvasChart() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
const data = [12, 19, 3, 5, 2, 3, 7, 11, 15, 18, 10, 6];
const labels = ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'];
const padding = 50;
const chartWidth = canvas.width - padding * 2;
const chartHeight = canvas.height - padding * 2;
ctx.beginPath();
ctx.moveTo(padding, canvas.height - padding);
ctx.lineTo(canvas.width - padding, canvas.height - padding);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, canvas.height - padding);
ctx.stroke();
const maxValue = Math.max(...data);
const barWidth = chartWidth / data.length;
data.forEach((value, index) => {
const barHeight = (value / maxValue) * chartHeight;
const x = padding + index * barWidth;
const y = canvas.height - padding - barHeight;
ctx.fillStyle = 'rgba(54, 162, 235, 0.6)';
ctx.fillRect(x + 5, y, barWidth - 10, barHeight);
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText(labels[index], x + barWidth / 2, canvas.height - padding + 15);
});
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('月度销售数据', canvas.width / 2, padding / 2);
}
function canvasImageProcessing() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
ctx.drawImage(img, 0, 0, 400, 300);
const imageData = ctx.getImageData(0, 0, 400, 300);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const gray = (r + g + b) / 3;
data[i] = gray;
data[i + 1] = gray;
data[i + 2] = gray;
}
ctx.putImageData(imageData, 400, 0);
};
img.src = 'https://picsum.photos/800/600';
}