基于JavaScript canvas绘制贝塞尔曲线


Posted in Javascript onDecember 25, 2018

简单描述:页面上有四个点,鼠标拖动四个点的位置来改变贝塞尔曲线的形状,双击放置点位

效果图:

基于JavaScript canvas绘制贝塞尔曲线

基于JavaScript canvas绘制贝塞尔曲线

基于JavaScript canvas绘制贝塞尔曲线

代码:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
   html{overflow: hidden;}
   * {padding: 0;margin: 0;}
   #box {background-color: #000000;}
   .point {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 100px;
    top:200px;
    text-align: center;
    line-height: 20px;
   }
  </style>
 </head>
 <body>
  <canvas id="box"></canvas>

  <div class="point startPoint">b</div>
  <div class="point endPoint">e</div>
  <div class="point point1">1</div>
  <div class="point point2">2</div>
 <script src="js/max.js"></script>
 </body>
</html>

js:

/**
 * Created by Administrator on 2017/8/11.
 * js/max.js
 */
(function () {
 var curEle = null;
 var startPointView = document.querySelector(".startPoint");
 var endPointPointView = document.querySelector(".endPoint");
 var point1View = document.querySelector(".point1");
 var point2View = document.querySelector(".point2");
 var context = null;
 function init() {
  var canvasEle = document.querySelector("#box");
  canvasEle.width = innerWidth;
  canvasEle.height = innerHeight;
  //实时监听网页大小
  window.onresize = function () {
   canvasEle.width = innerWidth;
   canvasEle.height = innerHeight;
  };
  context = canvasEle.getContext("2d");

  context.strokeStyle = "white";
  context.lineWidth = 10;
  //贝塞尔曲线简单用法
  context.beginPath();
  context.moveTo(300,300);
  context.bezierCurveTo(500,200,600,250,600,600);
  context.stroke();
  //循环获取四个点的数组
  for(var i=0;i<4;i++){
  addEvent([startPointView,endPointPointView,point1View,point2View][i]);
  }
  //鼠标双击移除鼠标滑动事件 放下拖动的点
  document.ondblclick = function () {
   document.removeEventListener("mousemove",move);
  };
 }
 //鼠标按下拖动
 function addEvent(ele) {
  ele.onmousedown = function () {
   curEle = this;
   document.addEventListener("mousemove",move);
  };
 }
 //获取拖动位置并绘制贝塞尔曲线
 function move(event) {
  curEle.style.left = event.pageX+"px";
  curEle.style.top = event.pageY+"px";
  context.clearRect(0,0,innerWidth,innerHeight);
  context.beginPath();
  context.moveTo(getLeft(startPointView),getTop(startPointView));
  context.bezierCurveTo(getLeft(point1View),getTop(point1View),getLeft(point2View),getTop(point2View),getLeft(endPointPointView),getTop(endPointPointView));
  context.stroke();
 }
 function getLeft(ele) {
  return parseInt(ele.style.left);
 }
 function getTop(ele) {
  return parseInt(ele.style.top);
 }
 init();
})();

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

Javascript 相关文章推荐
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
基于js Canvas实现二次贝塞尔曲线
Dec 25 #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
You might like
长波知识介绍
2021/03/01 无线电
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
解决vue-router中的query动态传参问题
2018/03/20 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python爬虫超时的处理的实例
2018/12/19 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python实现点云投影到平面显示
2020/01/18 Python
numpy库reshape用法详解
2020/04/19 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
三下乡活动方案
2014/01/31 职场文书
花店创业计划书范文
2014/02/07 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android
Python中的socket网络模块介绍
2022/07/23 Python