基于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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
javascript每日必学之多态
Feb 23 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
基于Vue.js实现tab滑块效果
Jul 23 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
JS实现放烟花效果
Mar 10 Javascript
js实现盒子滚动动画效果
Aug 09 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 无限分类的树类代码
2009/12/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JS实现div居中示例
2014/04/17 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
python类定义的讲解
2013/11/01 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
TensorFlow实现Logistic回归
2018/09/07 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
销售高级职员求职信
2013/10/29 职场文书
欢迎领导检查标语
2014/06/27 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
可怜妈妈观后感
2015/06/09 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
Nginx配置之禁止指定IP访问
2022/05/02 Servers