html5画布拖动绘制图形
在浏览器中绘制图形曲线从未如此简单。 直到最近,如果需要平滑的图表,则必须在服务器上生成图像或创建SVG。 动态创建曲线需要忍者JavaScript技能,数学学位和极大的耐心。
canvas元素已更改所有内容。 现在,我们可以用几行代码绘制复杂的线,曲线和形状并为其设置动画。 今天,我们将看看二次曲线。
什么是二次曲线?
自从我上了数学课以来已经很长时间了,所以请不要期望深入的解释! 如果您有兴趣,请查看WolframMathWorld上的偏头痛诱发方程式…
回来了吗
像任何一条线一样,二次曲线具有起点(P 0 )和终点(P 2 )。 然后,它具有确定线的曲率的单个控制点(P 1 )。 维基百科的这张图片提供了很好的曲线生成插图。
二次曲线非常适合绘制平滑的边缘。 从该图像可以看到,很容易指定通常会出现平方边的控制点。
数学足够了-让我们看一些代码!
canvas元素支持二次曲线。 首先,我们需要进行一些初始化以获取画布上下文并设置默认的线宽和颜色:
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
现在,我们定义曲线的起点(P 0 ):
ctx.beginPath();
ctx.moveTo(100, 250);
现在可以使用quadraticCurveTo()方法绘制二次曲线。 它包含四个参数:
- 控制点的x坐标(P 1 )
- 控制点的y坐标(P 1 )
- 终点的x坐标(P 2 )
- 终点的y坐标(P 2 )
最后,我们调用stroke()方法完成曲线:
ctx.quadraticCurveTo(250, 100, 400, 250);
ctx.stroke();
为了达到这一目标,您做得很好,所以我创建了一个交互式画布二次曲线演示页面 (对不起,它在IE8及以下版本中不起作用) 。 拖动控制点或直线的任意一端,它将为您生成代码。
在我的下一篇文章中,我们将使用贝塞尔曲线创建一些更有趣的形状……
翻译自: https://www.sitepoint.com/html5-canvas-draw-quadratic-curves/
html5画布拖动绘制图形