基于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 相关文章推荐
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
SVG实现时钟效果
Jul 17 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
基于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使用数组实现队列
2012/02/05 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
js 获取html5的data属性实现方法
2017/07/28 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python字符串的方法与操作大全
2018/01/30 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python实现名片管理系统
2020/02/14 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
六一儿童节活动总结
2014/08/27 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
赤壁观后感(2)
2015/06/15 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server