基于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();
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Sonarqube扫描Javascript代码的示例

    使用Sonarqube扫描Javascript代码的示例

    使用sonarqube对javascript代码进行扫描,分析代码质量,最简单的方式莫过于使用缺省的sonar-way中的javascript的规则,使用sonar-scanner进行扫描,这篇文章通过最简单的例子,来进行说明. 事前准备 Sonarqube Sonarqube可以使用docker版本快速搭建,可以参看一下Easypack整理的镜像,具体使用可以参看如下链接,这里不再赘述: https://hub.docker.com/r/liumiaocn/sonarqube/ 环境假定 本文

  • js微信扫描二维码登录网站技术原理

    js微信扫描二维码登录网站技术原理

    微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能.微信开放平台的网址是https://open.weixin.qq.com 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 授权流程说明 微信OAuth2.0授权登录

  • Javascript写了一个清除“logo1_.exe”的杀毒工具（可扫描目录）

    最近我的共享目录里面所有exe文件都被病毒感染,上网一查才知道是"logo1_.exe"这个咚咚搞的鬼.网上对这个病毒的危害性评价得很高,认为只要中了病毒,整台机器都只能"Format"了.其原因大概就是因为所有应用程序都被感染,运行任何程序都回使病毒"重生".我使用"卡巴司机"杀毒,结果提示无法清除,将我整个exe文件给删了.郁闷中,自己动手写了这个咚咚来清除已感染程序里的的病毒. 中了"logo1_.exe&qu

  • JavaScript基础之静态方法和实例方法分析

    JavaScript基础之静态方法和实例方法分析

    本文实例讲述了JavaScript静态方法和实例方法.分享给大家供大家参考,具体如下: 直接定义在构造函数上的方法和属性是静态的,  定义在构造函数的原型和实例上的方法和属性是非静态的 /* -- 静态方法 -- */ function ClassA() { //定义构造函数 }; ClassA.func = function() { //在构造函数上添加一个属性(因为函数也是对象) console.log("This is a static method"); } var insta

  • JavaScript基于数组实现的栈与队列操作示例

    JavaScript基于数组实现的栈与队列操作示例

    本文实例讲述了JavaScript基于数组实现的栈与队列操作.分享给大家供大家参考,具体如下: 栈数据结构: 1. 后进先出 队列在列表的尾端添加项,从列表的尾端移除项 队列图: 实现代码: var colors = ["red","blue"]; colors.push("brown"); //从队列尾部添加一项 console.log(colors);//[ 'red', 'blue', 'brown' ] var item =colors.

  • JavaScript模板引擎原理与用法详解

    本文实例讲述了JavaScript模板引擎原理与用法.分享给大家供大家参考,具体如下: 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "

  • JS调用安卓手机摄像头扫描二维码

    项目要求: 使用H5模仿微信扫一扫付款功能 经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容大多数浏览器 本地识别不占用服务端资源 代码比较简单只有一个页面 <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>Web QrCode Test</t

  • Node.JS中快速扫描端口并发现局域网内的Web服务器地址（80）

    在 Node.JS 中进行端口扫描还是比较方便的,一般会有广播和轮询两种方式.即使用广播和扫描,使用广播发出的消息有时会被路由器屏蔽,所以并不可靠. 使用node.js中的net模块,可以直接尝试向目录主机的某个端口进行连接,如果能建立连接,则说明该地址存在服务器. var socket = new Socket() socket.connect(port, host) socket.on('connect', function() { //找到port 和 host 地址 }) 所以只要进行2

  • JavaScript实现的鼠标跟随特效示例【2则实例】

    JavaScript实现的鼠标跟随特效示例【2则实例】

    本文实例讲述了JavaScript实现的鼠标跟随特效.分享给大家供大家参考,具体如下: 鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小.根据书上的代码做了一些修改.比如,如果用户不移动鼠标,是不会显示星星效果的:其次就是将源代码中的亮度调节等去掉了,因为效果并不是很明显.截了三幅图,黑点近似代表鼠标的位置.效果图如下: 源代码: <html>

  • JavaScript实现小球沿正弦曲线运动

    JavaScript实现小球沿正弦曲线运动

    本文实例为大家分享了js实现小球沿正弦曲线运动的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dot{ margin-top: 300px; position: absolute; width

随机推荐