原文: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. 联想昭阳e43l笔记本配置

    驱动精灵硬件检测报告 版本:2015.3.26.1363(8.1.326.1363)========================================================== ...

  2. ios崩溃日志1

    Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Could not loa ...

  3. POJ3467（预处理）

    Cross Counting Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 1331   Accepted: 375 De ...

  4. 第十二章——SQLServer统计信息（2）——非索引键上统计信息的影响

    原文:第十二章--SQLServer统计信息(2)--非索引键上统计信息的影响 前言: 索引对性能方面总是扮演着一个重要的角色,实际上,查询优化器首先检查谓词上的统计信息,然后才决定用什么索引.一般情 ...

  5. 12本最优秀的Android开发电子书强力推荐

    如今已经是手机互联网时代,手机应用越来越普及.Android作为基本的手机操作系统.吸引了众多开发人员開始为Android系统开发应用. 假设你正在开发或者准备进行Android的开发,我们今天推荐的 ...

  6. &lt;ASP.NET4 从入门到精通&gt;学习笔记1

    非常久没有写东西了,今日有时间,開始整理一下关于ASP.NET 4的学习笔记.提醒自己,也欢迎评论. 概述一共分为6个大的部分,兴许文章.将依据每一个部分进行整理,本读书笔记仅仅是整理关键点,对于啰嗦 ...

  7. zepto.js 源码注释备份

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  8. POJ3090_Visible Lattice Points【欧拉函数】

    Visible Lattice Points Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5653 Accepted: 333 ...

  9. cocos2d-x使用CCClippingNode实现跑马灯

    直接在代码,这是一个很好的包layer,可以直接调用  //原来白白 bool TestLayer::init() { CCSize size = CCDirector::sharedDirector ...

  10. eclipse 在win7 64两个图标出现位操作系统无法锁定到任务栏或任务栏

    eclipse 在win7 64位操作系统无法锁定到任务栏或者任务栏上出现两个图标 解决的方法 eclipse在win7 64bit下无法锁定到任务栏问题(或是锁定后任务栏出现两个eclipse图标) ...