用JS写的N阶贝塞尔曲线升阶降阶以及拖拽

freakkkk

于 2017-12-20 20:27:08 发布

阅读量1.7k

点赞数 4

文章标签： JS实现N阶贝塞尔曲线

本文链接：https://blog.csdn.net/freakkkk/article/details/78857171

版权

本文介绍了一种使用JavaScript实现的N阶贝塞尔曲线绘制方法，包括HTML和CSS布局，以及通过JavaScript操作贝塞尔曲线的升阶、降阶和拖拽功能。示例代码展示了如何在canvas上绘制点、线，并提供了升阶、降阶按钮来改变曲线的阶数，以及清空屏幕功能。

摘要由CSDN通过智能技术生成

用的是sublime3

直接上代码HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bezier</title>
<style>
.canvas{
position: relative;
top: 10px;
display: block;
margin: 0 auto;
background-color: #817373;
}
.btn_user{
display: block;
padding: 5px;
margin: 0 auto;
border: 1px solid #aaa;
background-color: #F9F5F5;
}
form{
  width: 800px;
  margin: 0 auto;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script>
</head>
<body>
  <form >
   <input id="huizhi_btn" type="button" class="btn_user" value="绘制贝塞尔曲线" style="display: inline;">
   <input id="up_btn" type="button" class="btn_user" value="升阶" style="display: inline;">
   <input id="down_btn" type="button" class="btn_user" value="降阶" style="display: inline;">
   <input id="clear_btn" type="button" class="btn_user" value="清空屏幕" style="display: inline;">
  </form>
  <canvas id="canvas" class="canvas">

最低0.47元/天解锁文章

freakkkk

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
用JS写的N阶贝塞尔曲线升阶降阶以及拖拽

用的是sublime3直接上代码HTML： Bezier .canvas{ position: relative; top: 10px; display: block; margin: 0 auto; background-color: #817373; } .btn_user{ display: block; paddin
复制链接

扫一扫