canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2);

四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始,需要使用ctx.moveTo(x,y)方法

演示效果如下图

上代码:

html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{ margin:0; padding:0;}

#info{ width:800px; height:30px; line-height:30px; margin:50px auto 0 auto;}

#canvas{ display:block; border:1px solid #ccc; margin:0px auto;}

</style>

<script src="js/dot.js"></script>

<script src="js/main.js"></script>

</head>

<body>

<div id="info"></div>

<canvas id="canvas" width="800" height="600"></canvas>

</body>

</html>

JS代码

dot.js

// JavaScript Document

var dot = function ( x , y ){

    this.x = x;

    this.y = y;

    this.r = dotR;

}

dot.prototype.draw = function (ctx){

    ctx.beginPath();

    ctx.arc( this.x , this.y , this.r , 0 , Math.PI*2 );

    ctx.fill();

    ctx.closePath();

}

main.js

// JavaScript Document

var CANVERS_WIDTH = 800;

var CANVERS_HEIGHT = 600;

var dotR = 10;

var dotArr = [];

window.onload = function(){

    var oCanvas = document.querySelector("#canvas");

    var oInfo = document.querySelector("#info");

    var ctx = oCanvas.getContext("2d");

    var dotA = new dot( 100 , 400 );

    dotArr.push( dotA );

    var dotB = new dot( 200 , 200 );

    dotArr.push( dotB );

    var dotC = new dot( 400 , 400 );

    dotArr.push( dotC );

    creatGuides();

    createBezier();

    function createBezier(){

        ctx.beginPath();

        ctx.moveTo( dotA.x , dotA.y );

        ctx.quadraticCurveTo( dotB.x , dotB.y , dotC.x , dotC.y );

        ctx.stroke();

        ctx.closePath();

    }

    //绘制辅助线

    ctx.lineWidth = 2;

    function creatGuides(){

        dotA.draw( ctx );

        dotB.draw( ctx );

        dotC.draw( ctx );

        ctx.beginPath();

        ctx.moveTo( dotA.x, dotA.y );

        ctx.lineTo( dotB.x , dotB.y );

        ctx.lineTo( dotC.x , dotC.y );

        ctx.stroke();

        ctx.closePath();

    }

    oCanvas.onmousedown = function (e){

        var disX = e.clientX - this.offsetLeft;

        var disY = e.clientY - this.offsetTop;

        //判断鼠标放下是是否在控制点上

        var curDot = checkDot(disX,disY)

        if( curDot ){

            if(oCanvas.setCapture){ oCanvas.setCapture(); }

            document.onmousemove = function (e){

                oInfo.textContent ="ctx.quadraticCurveTo("+ dotB.x + "," + dotB.y + "," + dotC.x + "," + dotC.y + ")";

                disX = e.clientX - oCanvas.offsetLeft;

                disY = e.clientY - oCanvas.offsetTop;

                curDot.x = disX;

                curDot.y = disY;

                console.log(disX)

                ctx.clearRect(0,0,CANVERS_WIDTH,CANVERS_HEIGHT);

                creatGuides();

                createBezier();

            }

            document.onmouseup = function (){

                creatGuides();

                createBezier();

                document.onmousemove = null;

                document.onmouseup = null;

                if(oCanvas.setCapture){ oCanvas.releasesCaptrue(); }

            }

            return false;

        }

    }

    function checkDot(x,y){

        for( var i=0; i<dotArr.length; i++ ){

            if( Math.abs( dotArr[i].x - x ) < dotR && Math.abs( dotArr[i].y - y ) < dotR ){

                return dotArr[i];

            }

        }

        return false;

    }

}

canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用的更多相关文章

  1. 贝塞尔曲线(面)二三维可视化(Three+d3)

    贝塞尔曲线(面)二三维可视化(Three+d3) 在学完 games101 几何后开始实践,可视化贝塞尔曲线 我想实现三维的贝塞尔曲线,用 threejs,但是 threejs 控制太麻烦了,因此,我 ...

  2. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. 贝塞尔曲线算法，js贝塞尔曲线路径点

    //anchorpoints:贝塞尔基点 //pointsAmount:生成的点数 //return 路径点的Array function CreateBezierPoints(anchorpoint ...

  4. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

  5. 用Canvas实现Photoshop的钢笔工具（贝塞尔曲线）

    前两天在用Canvas实现一个绘制路径的小功能.做完之后发现加以完善可以“复刻”一下PS里面的钢笔工具. PS里的钢笔工具对我来说是PS中最好用的工具! 所以本文主要介绍如何用Canvas来实现Pho ...

  6. OpenGL 实践之贝塞尔曲线绘制

    说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...

  7. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  8. 贝塞尔曲线：原理、自定义贝塞尔曲线View、使用！！！

    一.原理 转自:http://www.2cto.com/kf/201401/275838.html Android动画学习Demo(3) 沿着贝塞尔曲线移动的Property Animation Pr ...

  9. canvas绘制形状

    栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...

随机推荐

  1. mount -t nfs 的使用

    服务安装:1. 在VMware Ubuntu中安装NFS服务: sudo apt-get install nfs-kernel-server2. 安装成功会出现配置文件/etc/exports. ls ...

  2. ORA-27101 ORACLE not available

    问题描述:今天打开plsql,报错无法识别连接服务 1.然后去找,是不是oracle服务没有启动,但是发现oracle的其他服务都能启动.只有OracleDBConsolearies不能启动,这说明O ...

  3. Python~切片Slice

          [:] [:10] [-10:]       [':10:2]                                  

  4. go：匿名函数与闭包

    一.匿名函数 定义:没有函数名的函数. 作用:在go语言中目前了解的作用就是用于构成闭包. *注:由于javascript不存在块级作用域,故匿名函数常用来包含代码以不污染全局命名空间,运行后销毁环境 ...

  5. 【控制iOS7兼容iOS6 状态栏的显示不完全 简单缩写】

    #if ios7 self.automaticallyAdjustsScrollViewInsets = YES; self.edgesForExtendedLayout = UIRectEdgeNo ...

  6. BlockingQueue使用

    import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import ja ...

  7. mysql数据库的安装与使用

    ubuntu下面的mysql安装 sudo apt-get install mysql-server 安装后,登陆 mysql -u root -p mysql -h 主机名 -u 用户名 -p -h ...

  8. RobotFramework自动化测试之脚本编写（一）

    接触了上一篇的RF环境搭建及安装,相比大家都会觉得,哇塞,为什么要做这么多,那么复杂?装那么多干什么有什么用?写脚本会不会也很复杂? 其实首次安装的话 会觉得有点蒙,也不知道安装那么多是拿来干什么的, ...

  9. Hello world！（OC）

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { NSLog(@"Hello ...

  10. VS2010 有关测试的一些使用

    Visual Studio 2010 单元测试之一---普通单元测试:http://blog.csdn.net/tjvictor/archive/2011/02/09/6175362.aspx   V ...