Canvas绘图API进阶技巧

2023-09-17 13:11:34

踏上贝塞尔曲线与弧形轨迹之旅：绘制迷人图形的指南

引言

如果你已经对 HTML5 画布的基础知识有了一定的了解，那么现在是时候深入探索画布的强大功能了。接下来，我们将踏上一个奇妙的旅程，深入了解如何使用贝塞尔曲线和弧线创建令人惊叹的图形。准备好用代码和创造力来点亮你的画布吧！

弧形轨迹：打造完美的圆弧

arc() 函数就像画布上的魔术棒，它可以为你绘制出优美的圆弧。只需要提供圆弧中心、半径、起始角度和结束角度，它就能为你呈现一个平滑的弧线。想象一下，你可以用它来绘制一个完美的彩虹或一个生动的球体，可能性无限！

ctx.arc(x, y, radius, startAngle, endAngle);

二次贝塞尔曲线：绘制优美的曲线

quadraticCurveTo() 函数是二次贝塞尔曲线的缔造者。它通过两个控制点定义了一个平滑的曲线。想象一下，你可以用它来绘制一个微笑的嘴巴，一个优雅的花瓣，或者任何你想让它弯曲成形的形状。

ctx.quadraticCurveTo(cpx, cpy, x, y);

三次贝塞尔曲线：掌控复杂的曲线

bezierCurveTo() 函数是贝塞尔曲线世界中的重磅炸弹。它使用三个控制点来创建复杂而优雅的曲线。想象一下，你可以用它来绘制一个逼真的海浪，一个优美的书法字，或者任何超出你想象力的形状。

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

介于两条切线之间的弧线/曲线：用 arcTo() 创造魔法

arcTo() 函数就像一个桥梁，它可以让你在两条切线之间绘制一条平滑的弧线或曲线。想象一下，你可以用它来创建重叠的圆形、优美的波浪，或者任何介于两条直线之间的形状。

ctx.arcTo(x1, y1, x2, y2, radius);

代码示例：释放你的创造力

现在，让我们用一些代码示例来点亮你的画布：

绘制一个彩虹：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 500;
canvas.height = 300;

// 创建彩虹
ctx.beginPath();
ctx.arc(250, 150, 100, 0, Math.PI * 2);
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.stroke();
ctx.arc(250, 150, 90, 0, Math.PI * 2);
ctx.strokeStyle = 'orange';
ctx.stroke();
ctx.arc(250, 150, 80, 0, Math.PI * 2);
ctx.strokeStyle = 'yellow';
ctx.stroke();
ctx.arc(250, 150, 70, 0, Math.PI * 2);
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.arc(250, 150, 60, 0, Math.PI * 2);
ctx.strokeStyle = 'blue';
ctx.stroke();
ctx.arc(250, 150, 50, 0, Math.PI * 2);
ctx.strokeStyle = 'indigo';
ctx.stroke();
ctx.arc(250, 150, 40, 0, Math.PI * 2);
ctx.strokeStyle = 'violet';
ctx.stroke();

绘制一个心形：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 500;
canvas.height = 300;

// 创建心形
ctx.beginPath();
ctx.moveTo(250, 150);
ctx.quadraticCurveTo(300, 50, 350, 150);
ctx.quadraticCurveTo(400, 250, 250, 150);
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.stroke();