原文: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. SQL Server 2005,2008 正则表达式 替换函数应用详解

    CREATE function dbo.regexReplace ( @source ntext, --原字符串 ), --正则表达式 ), --替换值 , --是否是全局替换 --是否忽略大小写 ) ...

  2. 跨容器Hybrid离线组件方案

    关键词:跨容器.Hybrid.离线 摘要:今天主要讨论的是离线组件跨容器方案,想了解在线页面如何跨webview容器,可以看 http://www.cnblogs.com/yexiaochai/p/5 ...

  3. C指针决心 ------ 指针表达式

    本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 所谓的指针表达式是指一个表达式.其结果是一个指针. 例1. int  a,b; ...

  4. SQL Server中tempdb的管理

    原文:SQL Server中tempdb的管理 资料来自: http://blogs.msdn.com/b/sqlserverstorageengine/archive/tags/tempdb/ ht ...

  5. WPF学习（11）2D绘图

    本篇我们来学习WPF的绘图,在2D绘图中主要有这么几个重要的类:Drawing.Visual和Shape,顺便讲下Brush和BitmapEffect. 1 2D绘图 1.1Drawing类 Draw ...

  6. HTTP简单的解析协议

    1.HTTP定义的协议 官方的定义:        WWW这是Internet作为传输介质的应用.WWW主变速器单元是在线Web网页.WWW它正在给客户/server计算模型,由Web浏览器Webse ...

  7. linux下一个apache+tomcat负载均衡和集群

    先说一下我的环境 一个ubuntu虚拟机, 一个apache2.2示例 两tomcat1.7示例 1.安装apacheserver sudo apt-get install apache2 假设要重新 ...

  8. Eclipse提交任务至Hadoop集群遇到的问题

    环境:Windows8.1,Eclipse 用Hadoop自带的wordcount示例 hadoop2.7.0 hadoop-eclipse-plugin-2.7.0.jar //Eclipse的插件 ...

  9. 解决SQL订阅过程中找不到已经创建的订阅

    原文:解决SQL订阅过程中找不到已经创建的订阅 之前有写过一篇博客,主要是图解SQL复制技术:图解SQL 2008数据库复制,当时的测试环境是在我本地同一个服务器上面,所以测试的时候可谓是一帆风顺,最 ...

  10. 使用批处理给IIS添加MIME类型

    原文 使用批处理给IIS添加MIME类型   @echo off set /p warn="警告:本脚本会清空全部站点原有MIME类型,输入y按回车继续,直接回车退出:" if & ...