原文: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. POJ1274_The Perfect Stall(二部图最大匹配)

    解决报告 http://blog.csdn.net/juncoder/article/details/38136193 id=1274">题目传送门 题意: n头m个机器,求最大匹配. ...

  2. UVA No Tipping

    Problem A - No Tipping As Archimedes famously observed, if you put an object on a lever arm,it will ...

  3. 存储数据键和项目对的类（Dictionary对象）

    存储数据键和项目对的类(Dictionary对象) <% Class Dictionary Public Copyright, Developer, Name, Version, Web Pri ...

  4. 如果不能显示真正的考验个别车型toast问题解决

    当真正的考验个别车型toast不显示信息,找到两个解决方式.不知还有什么其他有效方法.期待大神们的分享!.! 1.手动方案:设置-->应用软件管理-->相应APP-->勾选显示通知框 ...

  5. mysql1130远程连接没有权限解决方法

    原因擅自在两个远程连接,一种是由于mysql限制,一个是防火墙限制. 1,解决防火墙限制: 于mysql服务主机将关闭防火墙,或者在防火墙高级设置这增加了入站和出站规则,加号mysql的port.同意 ...

  6. 折返(Reentrancy)VS线程安全(Thread safety)

    在Wiki上,折返例如,下面的定义(接) In computing, a computer program or subroutine is called reentrant if it can be ...

  7. NHibernate框架魅力美

    Nhibernate属于ORM框架之中的一个,在了解NHibernate之前我们先来了解什么是ORM? ORM框架是为了将类对象和关系建立映射.事实上说白了,就是通过一个 Mapping将我们的实体类 ...

  8. Codeforces Round #257 (Div. 1)449A - Jzzhu and Chocolate(贪婪、数学)

    主题链接:http://codeforces.com/problemset/problem/449/A ------------------------------------------------ ...

  9. Benchmark与Profiler---性能调优得力助手

    转载请注明出处:http://blog.csdn.net/gaoyanjie55/article/details/34981077 性能优化.它是一种诊断性能瓶颈,能问题点进行优化的过程.前两天听完s ...

  10. Android采用canvas绘制各种图形

    canvas通俗的说就是一个帆布,我们可以用刷子paint,就此随机抽签显卡. 原理: 能够canvas视Surface替代或接口.图形绘制Surface向上.Canvas封装了全部的绘制调用. 通过 ...