前端Canvas：让你的网站更具视觉冲击力

前端Canvas：让你的网站更具视觉冲击力毒舌时刻前端Canvas？这不是游戏开发才用的吗？ "Canvas性能差，我不用"——结果错过了丰富的视觉效果， "Canvas太复杂了，我学不会"——结果只能用静态图片， "我用CSS就够了，要Canvas干嘛"——结果无法实现复杂的动画效果。醒醒吧，Canvas不是游戏开发的专利，前端也可以用它来创建丰富的视觉效果！为什么你需要这个？ **丰富…

赛博朋克发布于 2026/4/7更新于 2026/4/1392K 浏览

前端Canvas：让你的网站更具视觉冲击力

毒舌时刻

前端Canvas？这不是游戏开发才用的吗？

"Canvas性能差，我不用"——结果错过了丰富的视觉效果，
"Canvas太复杂了，我学不会"——结果只能用静态图片，
"我用CSS就够了，要Canvas干嘛"——结果无法实现复杂的动画效果。

醒醒吧，Canvas不是游戏开发的专利，前端也可以用它来创建丰富的视觉效果！

为什么你需要这个？

丰富的视觉效果：创建动态图形、动画和游戏
高性能：直接操作像素，性能优异
交互性：支持鼠标、触摸等交互
数据可视化：绘制图表、仪表盘等
跨平台：在所有现代浏览器中运行

反面教材

// 反面教材：简单的Canvas绘制 function drawCircle() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 绘制一个简单的圆形 ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fillStyle = 'red'; ctx.fill(); ctx.stroke(); } // 反面教材：没有优化的动画 function animate() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let x = 0; setInterval(() => { // 每次都清除整个画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制移动的矩形 ctx = 'blue'; ctx(, , , );  += ; if ( > ) {  = ; } }, ); }

相关免费在线工具

curl 转代码

解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。在线工具，curl 转代码在线工具，online

Base64 字符串编码/解码

将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online

Base64 文件转换器

将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

Markdown 转 HTML

将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。在线工具，Markdown 转 HTML在线工具，online

HTML 转 Markdown

将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML 转 Markdown在线工具，online

JSON 压缩

通过删除不必要的空白来缩小和压缩JSON。在线工具，JSON 压缩在线工具，online

// 正确的做法：Canvas基础绘制 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); } // 正确的做法：Canvas动画 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 requestAnimationFrame(animate); } animate(); } // 正确的做法：Canvas交互 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; }); } // 正确的做法：Canvas数据可视化 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; // X轴 ctx.beginPath(); ctx.moveTo(padding, canvas.height - padding); ctx.lineTo(canvas.width - padding, canvas.height - padding); ctx.stroke(); // Y轴 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); } // 正确的做法：Canvas图像处理 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'; }

前端Canvas：让你的网站更具视觉冲击力