原文:canvas绘制贝塞尔曲线

1、绘制二次方贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标，x和y是终点坐标

数学公式表示如下：

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

*{padding: 0;margin:0;}

body{background: #1b1b1b;}

#div1{margin:50px auto; width:300px; height: 300px;}

canvas{background: #fff;}

</style>

<script type="text/javascript">

window.onload = function(){

    var c = document.getElementById('myCanvas');

    var content = c.getContext('2d');

    //绘制二次方贝塞尔曲线

    content.strokeStyle ="#FF5D43";

    content.beginPath();

    content.moveTo(0,200);

    content.quadraticCurveTo(75,50,300,200);

    content.stroke();

    content.globalCompositeOperation = 'source-over';    //目标图像上显示源图像

    //绘制上面曲线的控制点和控制线，控制点坐标为两直线的交点(75,50)

    content.strokeStyle = '#f0f';

    content.beginPath();

    content.moveTo(75,50);

    content.lineTo(0,200);

    content.moveTo(75,50);

    content.lineTo(300,200);

    content.stroke();

};

</script>

</head>

<body>

    <div id="div1">

        <canvas id="myCanvas" width="300" height="200"></canvas>

    </div>

</body>

</html>

2、三次方贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)　　其中参数cp1x，cp1y表示第一个控制点的坐标, cp2x，cp2y表示第二个控制点的坐标, x，y是终点的坐标；

数学公式表示如下：

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

*{padding: 0;margin:0;}

body{background: #1b1b1b;}

#div1{margin:50px auto; width:300px; height: 300px;}

canvas{background: #fff;}

</style>

<script type="text/javascript">

window.onload = function(){

    var c = document.getElementById('myCanvas');

    var content = c.getContext('2d');

    //三次方贝塞尔曲线

    content.strokeStyle = '#FA7E2A';

    content.beginPath();

    content.moveTo(25,175);

    content.bezierCurveTo(60,80,150,30,170,150);

    content.stroke();

    content.globalCompositeOperation = 'source-over';

    //绘制起点、控制点、终点

    content.strokeStyle = 'red';

    content.beginPath();

    content.moveTo(25,175);

    content.lineTo(60,80);

    content.lineTo(150,30);

    content.lineTo(170,150);

    content.stroke();

};

</script>

</head>

<body>

    <div id="div1">

        <canvas id="myCanvas" width="300" height="200"></canvas>

    </div>

</body>

</html>

canvas绘制贝塞尔曲线的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. JavaScript+canvas 利用贝塞尔曲线绘制曲线

    效果图: <body> <canvas id="test" width="800" height="300">< ...

  3. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  4. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  5. Unity GUI内绘制贝塞尔曲线

    用Handles可以直接在GUI下绘制贝塞尔 using UnityEditor; using UnityEngine; using System.Collections; public class ...

  6. Android 贝塞尔曲线解析

    相信很多同学都知道"贝塞尔曲线"这个词,我们在很多地方都能经常看到.利用"贝塞尔曲线"可以做出很多好看的UI效果,本篇博客就让我们一起学习"贝塞尔曲线 ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. canvas贝塞尔曲线

    贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...

  9. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

随机推荐

  1. javascript动画中的“帧”

    在写游戏的时候,动画移动的速度需要保持一致,为了在各个软硬件环境中速度的一致,需要考虑帧频的不同. 计算时间系数: 时间系数 = 目标FPS / 实际FPS 计算实际FPS actualFPS = 1 ...

  2. Effective C++笔记05：实现

    条款26:尽可能延后变量定义式的出现时间 博客地址:http://blog.csdn.net/cv_ronny 转载请注明出处! 有些对象,你可能过早的定义它,而在代码运行的过程中发生了导常,造成了開 ...

  3. PHP之运用CI用钩子实现URL权限控制————————【Badboy】

    <span style="background-color: rgb(247, 252, 255); font-family: Verdana, Arial, Helvetica, s ...

  4. 读书时间《JavaScript高级程序设计》二：面向对象

    接着上次的进度,开始看第6章. 第6章 面向对象的程序设计 理解对象 创建自定义对象最简单的方式就是创建一个 Object 的实例,然后为它添加属性和方法. var person = new Obje ...

  5. 开源 java CMS - FreeCMS2.1公布

    项目地址:http://www.freeteam.cn/ FreeCMS商业版V2.1更新功能 1.web页面信息採集:通过简单配置就可以抓取目标网页信息,支持增量式採集.keyword替换.定时採集 ...

  6. Android+NDK+OpenGLES开发环境配置

    1.资源 (1).Android的eclipse开发环境 我用adt-bundle-windows-x86.官方主页就能下载.这是一个打包的版本号,直接执行eclipse.exe你可以开始 (2).N ...

  7. linux处置服务Iptables

    一:Iptables防火墙服务 iptables分为两个部分:一个部分在内核中实现,一个为用户接口命令iptables,用户通过该命令来改动防火墙的功能.所以,iptables要使用对应的功能.必需要 ...

  8. cocos2dx 子弹飞作为一个例子来解释解酒效果类CCMotionStreak

    感谢点评与关注,欢迎转载与分享. 勤奋努力,持之以恒! 在游戏开发中,有时会须要在某个游戏对象上的运动轨迹上实现渐隐效果.比方子弹的运动轨迹,假设不借助引擎的帮助.这样的效果则须要通过大量的图片来实现 ...

  9. JAVA —— 数组

    import java.util.Arrays; public class Array { public static void main(String[] args){    Array test= ...

  10. matlab入门 蜂窝阵列

    B{1,1}=[1,2]; B{1,2}='kitty'; B B = [1x2 double]    'kitty' celldisp(B) B{1} =      1     2 B{2} =   ...