脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js Canvas实现二次贝塞尔曲线

基于js Canvas实现二次贝塞尔曲线

 更新时间：2018年12月25日 15:55:47   作者：Orange_J  
这篇文章主要为大家详细介绍了基于js Canvas实现二次贝塞尔曲线，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码，供大家参考，具体内容如下

先上效果图：

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次贝塞尔曲线</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
 body, h1{margin:0;}
 canvas{margin: 20px; }
</style>
</head>
<body>
 <h1>二次贝塞尔曲线</h1>
 <canvas id="canvas" width=600 height=600 style="border: 1px solid #ccc;"></canvas>
<script>
 /**
 * @param sx 起始点x坐标
 * @param sy 起始点y坐标
 * @param ex 结束点x坐标
 * @param ey 结束点y坐标
 * @param cx 控制点x坐标
 * @param cy 控制点y坐标
 * @param part 将起始点到控制点的线段分成的份数，数值越高，计算出的曲线越精确
 */
 function draw(sx, sy, ex, ey, cx, cy, part) {
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d'); 
 //绘制起始点、控制点、终点 
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 ctx.lineTo(cx, cy);
 ctx.lineTo(ex, ey);
 ctx.stroke();
 
 // 绘制二次贝塞尔曲线
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 // 起始点到控制点的x和y每次的增量
 var changeX1 = (cx - sx) / part;
 var changeY1 = (cy - sy) / part;
 // 控制点到结束点的x和y每次的增量
 var changeX2 = (ex - cx) / part;
 var changeY2 = (ey - cy) / part;
 
 for(var i = 0; i < part; i++) {
 // 计算两个动点的坐标
 var qx1 = sx + changeX1 * i;
 var qy1 = sy + changeY1 * i;
 var qx2 = cx + changeX2 * i;
 var qy2 = cy + changeY2 * i;
 // 计算得到此时的一个贝塞尔曲线上的点坐标
 var bx = qx1 + (qx2 - qx1) * i / part;
 var by = qy1 + (qy2 - qy1) * i / part;
 
 ctx.lineTo(bx, by);
 }
 ctx.stroke();
 }
 
 window.onload = function () {
 draw(0, 0, 600, 0, 150, 450, 100);
 };
</script>
</body>
</html>

上面的是静态的，来个动态的看一看：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次贝塞尔曲线</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
 body, h1{margin:0;}
 canvas{margin: 20px; }
</style>
</head>
<body>
 <h1>二次贝塞尔曲线</h1>
 <canvas id="canvas" width=600 height=600 style="border: 1px solid #ccc;"></canvas>
<script>
 /**
 * @param sx 起始点x坐标
 * @param sy 起始点y坐标
 * @param ex 结束点x坐标
 * @param ey 结束点y坐标
 * @param cx 控制点x坐标
 * @param cy 控制点y坐标
 * @param part 将起始点到控制点的线段分成的份数，数值越高，计算出的曲线越精确
 * @param interval 画图的间隔
 * @return function 调用一次就向后画一段曲线
 */
 function draw(sx, sy, ex, ey, cx, cy, part, interval) {
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d'); 
 //绘制起始点、控制点、终点 
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 ctx.lineTo(cx, cy);
 ctx.lineTo(ex, ey);
 ctx.stroke();
 
 // 绘制二次贝塞尔曲线
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 // 起始点到控制点的x和y每次的增量
 var changeX1 = (cx - sx) / part;
 var changeY1 = (cy - sy) / part;
 // 控制点到结束点的x和y每次的增量
 var changeX2 = (ex - cx) / part;
 var changeY2 = (ey - cy) / part;
 // 上次的点坐标
 var lastX = sx;
 var lastY = sy;
 
 var i = 0;
 
 return function () {
 // 计算两个动点的坐标
 var qx1 = sx + changeX1 * i;
 var qy1 = sy + changeY1 * i;
 var qx2 = cx + changeX2 * i;
 var qy2 = cy + changeY2 * i;
 // 计算得到此时的一个贝塞尔曲线上的点
 var bx = qx1 + (qx2 - qx1) * i / part;
 var by = qy1 + (qy2 - qy1) * i / part;
 // 从上次的点继续画
 ctx.beginPath();
 ctx.moveTo(lastX, lastY);
 ctx.lineTo(bx, by);
 ctx.stroke();
 // 保存点坐标
 lastX = bx;
 lastY = by;
 
 i += 1;
 
 if (i < part) {
 setTimeout(arguments.callee, interval);
 }
 }
 }
 
 window.onload = function () {
 var display = draw(0, 0, 600, 0, 150, 450, 200, 50);
 display();
 };
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解嵌套命名空间在TypeScript中如何应用

    详解嵌套命名空间在TypeScript中如何应用

    命名空间是TypeScript中非常有用的概念，可以帮助我们组织和管理代码，避免命名冲突，下面小编就来和大家聊聊嵌套命名空间在TypeScript中是如何应用的吧
    2023-06-06
  • webpack file-loader和url-loader的区别

    webpack file-loader和url-loader的区别

    这篇文章主要介绍了webpack file-loader和url-loader的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JavaScript表单验证完美代码

    JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-03-03
  • JavaScript设计模式发布订阅模式

    JavaScript设计模式发布订阅模式

    这篇文章主要介绍了JavaScript设计模式发布订阅模式，发布订阅设计模式是和观察者设计模式基本上相同，但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有
    2022-06-06
  • 用javascript实现无刷新更新数据的详细步骤 asp

    用javascript实现无刷新更新数据的详细步骤 asp

    用javascript实现无刷新更新数据的详细步骤 asp...
    2006-12-12
  • 微信小程序中使用ECharts 异步加载数据的方法

    微信小程序中使用ECharts 异步加载数据的方法

    这篇文章主要介绍了微信小程序中使用ECharts 异步加载数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • console.log()与console.dir()的区别及说明

    console.log()与console.dir()的区别及说明

    这篇文章主要介绍了console.log()与console.dir()的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 如何提高数据访问速度

    如何提高数据访问速度

    本文主要介绍了提高数据访问速度的方法，具有很好的参考作用，需要的朋友一起来看下吧
    2016-12-12
  • 小程序绑定用户方案优化小结

    小程序绑定用户方案优化小结

    这篇文章主要介绍了小程序绑定用户方案优化小结，该类小程序在使用之前就需要绑定用户信息。常见于线下门店类功能性小程序。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 微信小程序开发的基本流程步骤

    微信小程序开发的基本流程步骤

    这篇文章主要介绍了微信小程序开发的基本流程步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论