揭秘 Canvas 魅力：让圆形和三角形跃然眼前！

2024-01-23 20:49:03

在互联网世界的数字画布上，Canvas 闪耀着夺目的光芒，赋予开发者创造生动图形的非凡力量。凭借 JavaScript 的魔力，Canvas 将 HTML 元素变身为图形艺术的舞台。

掌控圆形：绘制的精髓

圆形，大自然中完美和谐的缩影，在 Canvas 的掌控下，变得触手可及。通过指定中心坐标和半径，我们可以用一条优雅的弧线勾勒出它柔美的形态。

// 圆形绘制
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

三角形：锋利的魅力

三角形，几何世界的多面手，在 Canvas 的演绎下，呈现出不同的锋利魅力。只需指定三个顶点坐标，即可勾勒出其坚毅的轮廓。

// 三角形绘制
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath();
ctx.stroke();

触手可及的创造力

Canvas 不仅限于绘制基本图形。它是一块数字画布，赋予我们无限的创造力。我们可以使用路径、渐变和变换来创建复杂的形状、动画和交互式图形。

// 复杂形状绘制
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(150, 50, 150, 150, 50, 150);
ctx.closePath();
ctx.fillStyle = '#00FF00';
ctx.fill();