基于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的数组的扩展实例代码
Jul 09 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JS的replace方法介绍
2012/10/20 Javascript
js opener的使用详解
2014/01/11 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JSONP之我见
2015/03/24 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
python二分法实现实例
2013/11/21 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
keras中的backend.clip用法
2020/05/22 Python
Python如何使用input函数获取输入
2020/08/06 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Java的基础面试题附答案
2016/01/10 面试题
linux面试题参考答案(5)
2014/09/01 面试题
求职自荐书范文
2013/12/04 职场文书
财经学院自荐信范文
2014/02/02 职场文书
教师对学生的评语
2014/04/28 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
个人作风建设总结
2014/10/23 职场文书
干部考察材料范文
2014/12/24 职场文书
优秀团员个人总结
2015/02/26 职场文书
人事聘任通知
2015/04/21 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS