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. Ubuntu 14.04 LTS 安装Docker

    Docker官方是有很详细的安装文档(https://docs.docker.com/engine/installation/ubuntulinux/),这里做了一个Ubuntu 14.04 LTS中 ...

  2. WindowsForm菜单工具栏--2016年12月6日

    ContextMenuStrip 添加控件后可在其他空间属性中进行绑定 MenuStrip       设置热键:在编辑的时候输入(&F)       设置快捷键:选中菜单项--右键属性--S ...

  3. mac mysql cmd

    sudo /usr/local/mysql/support-files/mysql.server start sudo /usr/local/mysql/support-files/mysql.ser ...

  4. 使用Java判断字符串中的中文字符数量

    Java判断一个字符串str中中文的个数,经过总结,有以下几种方法(全部经过验证),可根据其原理判断在何种情况下使用哪个方法: 1. char[] c = str.toCharArray(); for ...

  5. SQL中inner join、outer join和cross join的区别

    对于SQL中inner join.outer join和cross join的区别简介:现有两张表,Table A 是左边的表.Table B 是右边的表.其各有四条记录,其中有两条记录name是相同 ...

  6. php接口

    如果要继承多个类的方法规范,用接口,因为抽象类只能继承一个: 如果要共享一个方法体内容,用抽象类: <?php //接口是为了规范实现它的子类,以达到统一的目的 //接口不能被实例化 inter ...

  7. [LeetCode]Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  8. 【leetcode】Remove Element

    题目概述: Given an array and a value, remove all instances of that value in place and return the new len ...

  9. Hibernate的一级缓存

    Hibernate的一级缓存 什么是缓存:缓存将数据库/硬盘上文件中数据,放入到缓存中(就是内存中一块空间).当再次使用的使用,可以直接从内存中获取 缓存的好处:提升程序运行的效率.缓存技术是Hibe ...

  10. wpf telerik中的book控件

    下载 telerik中的书本控件,仅供学习使用.