Canvas 画贝塞尔曲线（二阶曲线和三阶曲线）

效果图为动态图，一个小圆点沿着曲线运动，并显示实时点坐标。

在线预览：

二阶：http://qingshanboke.com/demo/quadratic.htm

三阶：http://qingshanboke.com/demo/bezier.htm

一、实现思路：

1.用两个canvas实现，一个绘制曲线，一个绘制运动圆点。

2.绘制曲线：可以通过canvas提供的API方法绘制。

二阶：quadraticCurveTo(controlX, controlY, endingPointX, endingPointY) 1个控制点。

三阶：bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endPointX, endPointY)，2个控制点。

3.绘制圆点：根据贝塞尔曲线公式，计算出不同时刻圆点坐标，然后绘制到canvas上。

二、实现过程：

1.二阶曲线：

核心公式：

实现代码：

<html>
<title>二阶贝塞尔曲线</title>
<style type="text/css">body {background: black;}#canvas {position: absolute;top: 0;left: 0;width: 600px;height: 600px;}#line {position: absolute;top: 0;left: 0;width: 600px;height: 600px;}
</style><body><canvas id="canvas" width="600" height="600"></canvas><canvas id="line" width="600" height="600"></canvas><script type="text/javascript">var point = {begin: {x: 20,y: 20},control: {x: 40,y: 400},end: {x: 600,y: 600},};function drawline() {let canvas = document.getElementById("canvas");let ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(point.begin.x, point.begin.y);ctx.quadraticCurveTo(point.control.x, point.control.y, point.end.x, point.end.y);ctx.strokeStyle = "#2578b0";ctx.lineWidth = 2;ctx.stroke();}drawline();let t = 0;function drawPoint() {//根据二次贝塞尔曲线的公式，获取某时刻t[0-1]的贝塞尔曲线上的点            let x = Math.pow((1 - t), 2) * point.begin.x + 2 * t * (1 - t) * point.control.x + Math.pow(t, 2) * point.end.x;let y = Math.pow((1 - t), 2) * point.begin.y + 2 * t * (1 - t) * point.control.y + Math.pow(t, 2) * point.end.y;//移出画布后，重新开始if (x > 600) {t = 0;x = point.begin.x;y = point.begin.y;}let canvas = document.getElementById("line");let ctx = canvas.getContext("2d");//清除上一次的点ctx.clearRect(0, 0, 600, 600);ctx.beginPath();//画小圆点ctx.moveTo(point.begin.x, point.begin.y);ctx.arc(x, y, 4, 0, 2 * Math.PI, false);ctx.fillStyle = "white";ctx.fill();//显示坐标ctx.font = 'bold 12px Arial';ctx.textAlign = 'left';ctx.textBaseline = 'bottom';ctx.fillStyle = 'white';ctx.fillText("x:" + parseInt(x), x, y - 24);ctx.fillText("y:" + parseInt(y), x, y - 12);ctx.closePath();t += 0.006;}setInterval(drawPoint, 60);</script>
</body></html>

在线预览：http://qingshanboke.com/demo/quadratic.htm

2.三阶曲线：

核心公式：

实现代码：

<html>
<title>三阶贝塞尔曲线</title>
<style type="text/css">body {background: black;}#canvas {position: absolute;top: 0;left: 0;width: 600px;height: 600px;}#line {position: absolute;top: 0;left: 0;width: 600px;height: 600px;}
</style><body><canvas id="canvas" width="600" height="600"></canvas><canvas id="line" width="600" height="600"></canvas><script type="text/javascript">var point = {begin: {x: 0,y: 600},control1: {x: 500,y: 500},control2: {x: 400,y: 40},end: {x: 600,y: 0},};function drawline() {let canvas = document.getElementById("canvas");let ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(point.begin.x, point.begin.y);ctx.bezierCurveTo(point.control1.x, point.control1.y, point.control2.x, point.control2.y, point.end.x, point.end.y);ctx.strokeStyle = "#2578b0";ctx.lineWidth = 2;ctx.stroke();}drawline();let t = 0;function drawPoint() {//根据三次贝塞尔曲线的公式，获取某时刻t[0-1]的贝塞尔曲线上的点            let x = point.begin.x * Math.pow((1 - t), 3) + 3 * t * point.control1.x * Math.pow((1 - t), 2) + 3 * point.control2.x * Math.pow(t, 2) * (1 - t) + point.end.x * Math.pow(t, 3);let y = point.begin.y * Math.pow((1 - t), 3) + 3 * t * point.control1.y * Math.pow((1 - t), 2) + 3 * point.control2.y * Math.pow(t, 2) * (1 - t) + point.end.y * Math.pow(t, 3);//移出画布后，重新开始if (x > 600) {t = 0;x = point.begin.x;y = point.begin.y;}let canvas = document.getElementById("line");let ctx = canvas.getContext("2d");//清除上一次的点ctx.clearRect(0, 0, 600, 600);ctx.beginPath();//画小圆点ctx.moveTo(point.begin.x, point.begin.y);ctx.arc(x, y, 4, 0, 2 * Math.PI, false);ctx.fillStyle = "white";ctx.fill();//显示坐标ctx.font = 'bold 12px Arial';ctx.textAlign = 'left';ctx.textBaseline = 'bottom';ctx.fillStyle = 'white';ctx.fillText("x:" + parseInt(x), x, y - 24);ctx.fillText("y:" + parseInt(y), x, y - 12);ctx.closePath();t += 0.006;}setInterval(drawPoint, 60);</script>
</body></html>

在线预览：http://qingshanboke.com/demo/bezier.htm

参考资料：

https://www.w3school.com.cn/tags/canvas_quadraticcurveto.asp

https://www.w3school.com.cn/tags/canvas_beziercurveto.asp

https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin

https://blog.csdn.net/ixygj197875/article/details/80043658

Canvas 画贝塞尔曲线（二阶曲线和三阶曲线）相关推荐

canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
写在最前在之前的这篇文章中我们提到了对于贝塞尔公式的运用.本次分享一下如何推导贝塞尔公式以及附一个简单的?即小球跟随曲线轨迹运动. 欢迎关注我的博客,不定期更新中-- 效果预览 demo地址对于如 ...
python canvas画弧度_Python 小技之繁花曲线
前几天逛朋友圈的时候,无意间刷到同学这样一条内容: 朋友圈截图不知道大家有没有眼熟的感觉,反正是勾起了我不少回忆. 这种叫做"万花尺"的小玩意儿小时候应该不少人都玩过.一个大圆套 ...
【Android UI】贝塞尔曲线 ② ( 二阶贝塞尔曲线公式 | 三阶贝塞尔曲线及公式 | 高阶贝塞尔曲线 )
文章目录一.二阶贝塞尔曲线公式二.三阶贝塞尔曲线三.高阶贝塞尔曲线贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.二阶贝塞尔曲线公式二 ...
三阶贝塞尔曲线选点_用三阶贝塞尔曲线拟合圆
前言由于贝塞尔曲线控制简便且具有极强的描述能力,它常被用来生成复杂的平滑曲线:圆形是一种很常用的普通图形,在计算机图形学中也有很多画圆的算法,本文想探究一下如何用三阶贝塞尔曲线拟合圆形. 在研究这个 ...
使用ZRender画贝塞尔曲线
背景最近设计师控制不住自己的洪荒之力,设计图搞得高端大气上档次,各种曲线满天飞.为了更好地实现页面效果,经常需要绘制形如下图的贝塞尔曲线: 一般实现这种效果有两种思路:SVG和Canvas.直接使用 ...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
Android利用canvas画各种图形(点、直线、弧、圆、扁圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
ios 画线平滑_iOS 画贝塞尔曲线连续曲线平滑曲线曲线图表
利用贝塞尔曲线画一段连续曲线 bezierDemo2.png bezierDemo1.png image.png 如果我们根据几个点画一条连续的曲线, 我们使用的方法是 - (void)addCurv ...
C语言画贝塞尔曲线的函数
程序截图简单说明这个函数就是 void drawBezierCurve(COLORREF color, const unsigned int len, ...) color 是贝塞尔曲线的颜色,l ...
【Android UI】贝塞尔曲线 ① ( 一阶贝塞尔曲线 | 二阶贝塞尔曲线 )
文章目录一.一阶贝塞尔曲线二.二阶贝塞尔曲线贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.一阶贝塞尔曲线一阶贝塞尔曲线本质是一条直 ...

Canvas 画贝塞尔曲线（二阶曲线和三阶曲线）

Canvas 画贝塞尔曲线（二阶曲线和三阶曲线）相关推荐

最新文章

热门文章