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


Posted in Javascript onDecember 25, 2018

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
详解js前端代码异常监控
Jan 11 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 #Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 #Javascript
微信小程序开发问题之wx.previewImage
Dec 25 #Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 #Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 #Javascript
使用gulp构建前端自动化的方法示例
Dec 25 #Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
详解react-redux插件入门
2018/04/19 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Numpy之random函数使用学习
2019/01/29 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
师德师风自我评价范文
2014/09/11 职场文书
优秀教师单行材料
2014/12/16 职场文书
颐和园导游词400字
2015/01/30 职场文书
教师教育心得体会
2016/01/19 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
python脚本框架webpy模板控制结构
2021/11/20 Python