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. IE 8 下的 box-sizing 和 min-* 属性

    在非 IE 浏览器中,默认情况下 width 属性指的是内容区域(content)的宽度. IE 6+ 中,如果浏览器以标准模型渲染,和非 IE 浏览器的表现是一致的:如果浏览器以怪癖模式渲染,则 w ...

  2. HDU 5023 A Corrupt Mayor's Performance Art 线段树区间更新+状态压缩

    Link:  http://acm.hdu.edu.cn/showproblem.php?pid=5023 #include <cstdio> #include <cstring&g ...

  3. 安装切换openjdk

    安装各种版本openjdk sudo apt-get install openjdk-6-jdk sudo apt-get install openjdk-7-jdk sudo apt-get ins ...

  4. canvas 画板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 父窗口jquery触发iframe按钮事件(转载)

    原文地址: http://blog.csdn.net/muziduoxi/article/details/11123923 <script type="text/javascript& ...

  6. whose view is not in the window hierarchy

    参考:http://www.jianshu.com/p/9e90cb866fdf 在做界面跳转的时候,我们经常会用到这两个函数 func dismissViewControllerAnimated(f ...

  7. js获取当前对象的颜色判断改变颜色

    function toHex(N) { if (N==null) return "00"; N=parseInt(N); if (N==0 || isNaN(N)) return ...

  8. python中read、readline、readlines的区别

    read直接读入整个文件,存成一个字符串变量 readline一行一行读入文件,所以说读取的文件可以大于内存,但是读取的速度很慢 readlines一次读取整个文件,存成一个列表,所以说也必须小于内存 ...

  9. ppt - 常规策划

    1 比较图2 progress3 目标 proposal4 market leadership5 分析 - 设计 - 开发 - 实施 - 评估6 innovation7 时间区间表述8 阶梯式9 主 ...

  10. Tortoise SVN 使用帮助

    同步至本地:新建文件夹,SNV checkout 输入用户名密码,确认. 上传文件:将要上传的文件放在一个文件夹里,选择要上传的文件所在的文件夹,右键单击,tortoiseSVN,Import,选择要 ...