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. Android Activity的加载的模式

    ---恢复内容开始--- 本文来自http://www.cnblogs.com/lwbqqyumidi/p/3771542.html launchMode在多个Activity跳转的过程中扮演着重要的 ...

  2. [BZOJ2761][JLOI2011]不重复数字

    [BZOJ2761][JLOI2011]不重复数字 试题描述 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复 ...

  3. 听说你们要开始学C了

    同学们好: 先自我介绍一下,我是你们的助教吴喆(厚颜无耻地要求大家叫我吉吉老师:-D),本科学的电子,所以陆陆续续接触了不少C/C++的工作,曾经被编码折磨得死去活来,如今却对其念念不舍,颇有点“斯德 ...

  4. jquery向苹果或者android发送请求

    var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { ...

  5. 曲线救国：IIS7集成模式下如何获取网站的URL

    如果我们在Global中的Application_Start事件中访问HttpContext.Current.Request对象,如: protected void Application_Start ...

  6. 怎么在myeclipse中导入已经写好的项目

    经常我们需要学习别人写好了的源码来提升自己的编码能力,本文将介绍如何从外部导入别人已经写好的项目到我们myeclipse里面.同时也将介绍怎么给导入的工程改名的问题.                 ...

  7. hdfs的读写数据流

    hdfs的读:      首先客户端通过调用fileSystem对象中的open()函数读取他需要的的数据,fileSystem是DistributedFileSystem的一个实例, Distrib ...

  8. 封装一个mysql类（ggshop）

    接口 abstract class db{ //连接服务器 public abstract function connect($n,$u,$p); //发送查询 protected abstract ...

  9. linux 内核与用户空间通信之netlink使用方法

    转自:http://blog.csdn.net/haomcu/article/details/7371835 Linux中的进程间通信机制源自于Unix平台上的进程通信机制.Unix的两大分支AT&a ...

  10. 读写注册表 registrykey 创建删除

    namespace WindowsFormsApplication1 { public partial class Form1 : Form { public Form1() { Initialize ...