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. C和指针 第八章 习题

    8.5矩阵运算,A是一个x行,y列矩阵,B是y行z列矩阵,把A和B相乘,结果是另外一个x行z列矩阵,每个位置的值由下公式决定,编写函数: #include <stdio.h> void m ...

  2. Maven 入门 （1）—— 安装

    Maven 入门 (1)—— 安装 http://blog.csdn.net/kakashi8841/article/details/17371837 1.下载maven安装包 http://mave ...

  3. popoverPresentationController UIPopoverController 使用方法详解

    之前iPad特有的控件,现在iPhone亦可使用. 点击按钮,弹出popOverVC. 按钮的点击事件: - (IBAction)pickOrderAction:(UIButton *)sender ...

  4. Effective Python2 读书笔记3

    Item 22: Prefer Helper Classes Over Bookkeeping with Dictionaries and Tuples For example, say you wa ...

  5. iOS compare 字符串比较

    NSString 比较字符串,我介绍一些常用的方法: NSString *value = @"1234567890"; 比较的方法: [value compare:(NSStrin ...

  6. session超时时间设置方法

    session超时时间设置方法 由于session值之前没有设置,以至于刚登录的网站,不到一分钟就超时了,总结了一下,原来是session过期的原因,以下是设置session时间的3个方法: 1. 在 ...

  7. monkey工具使用中遇到的问题之一：手机模拟器中的部分应用出现网络无法连接

    问题描述: 手机模拟器中的部分应用出现网络无法连接,但是比如:浏览器即可以正常访问网页 解决方法如下: 1.以管理员身份进入到cmd中,以WIN10为例 ,在电脑左下角点击鼠标右键就可以看到 注意: ...

  8. 线性回归、梯度下降（Linear Regression、Gradient Descent）

    转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 实例 首先举个例子,假设我们有一个二手房交易记录的数据集,已知房屋面积.卧室数量和房屋的交易价格,如下表: ...

  9. Linux C编程学习之开发工具1---GCC编译器

    GCC简介 GCC(GNU Compiler Collection)是一套功能强大.性能优越的编程语言编译器,它是GNU计划的代表作品之一.GCC以GPL和LGPL许可证发行,它是类Unix和苹果电脑 ...

  10. [Unity3D]Unity+Android交互教程——让手机"动"起来

    想要用Unity实现一个二维码扫描的功能,然后网上找插件,找到一个貌似叫EasyCodeScanner,但下载下来用用,真不好使,一导入运行就报错,调好错了再运行发现点按钮没反应,反复试了几遍发现还是 ...