基于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 预解析
Oct 25 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JS 控件事件小结
Oct 31 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
数组Array的排序sort方法
Feb 17 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
JS函数本身的作用域实例分析
Mar 16 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操作数组的一些函数整理介绍
2011/07/17 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
外贸业务员工作职责
2014/01/06 职场文书
自我鉴定标准格式
2014/03/19 职场文书
授权委托书范本
2014/04/03 职场文书
毕业生求职信范文
2014/06/29 职场文书
五一活动标语
2014/06/30 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
教师岗位说明书
2015/09/30 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis