<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>html5 canvas贝塞尔曲线篇</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<h1>html5 canvas贝塞尔曲线篇</h1>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

	canvasApp();

}

function canvasSupport(){

	return Modernizr.canvas;

}

function canvasApp(){

	if(!canvasSupport()){

		return;

	}else{

		var theCanvas = document.getElementById('canvas')

		var context = theCanvas.getContext("2d")

	}

	drawScreen();

    function drawScreen(){

	     context.beginPath();

	     context.strokeStyle="red";

         context.lineWidth=2;

		 context.moveTo(150,0); 

		 context.bezierCurveTo(0,125,300,175,150,300);

		 context.stroke();

		 context.closePath();

		 //创建多弧点的贝塞尔曲线

		 context.beginPath();

	         context.strokeStyle="black";

                 context.lineWidth=2;

		 context.moveTo(0,150);  //从0,150开始

		 context.bezierCurveTo(150,0,175,300,300,150);

		 context.stroke();

		 context.closePath();

	}

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

你的支持是我最大的快乐！！

</canvas>

</body>

</html>

这一篇主要是创建多弧点的贝塞尔曲线

（150,0）,（175,300）

记得半年前我看着这2个点的位置看了半天都没反应过来

后来百度贝塞尔曲线的选取点才发现原来是多点的贝塞尔曲线的2个弧度坐标是用起始点和终点的弧度切线这样看的

如下图

html5 canvas贝塞尔曲线篇(下)的更多相关文章

  1. html5 canvas贝塞尔曲线篇(上)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. canvas贝塞尔曲线

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

  4. HTML5 canvas之基础篇（一）

    一.检测浏览器是否支持canvas if( !canvas || !canvas.getContext){ return; } 也可以使用modernizr.js库,Modernizr是一个易用的轻量 ...

  5. canvas贝塞尔曲线 - 2

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM

  6. canvas贝塞尔曲线 - 1

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAAIcCAIAAADwgGbqAAAgAElEQVR4nOy9a4wb55nn20kOZhq7o8

  7. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  8. canvas-js贝塞尔曲线代码在线生成工具

    详细内容请点击 canvas贝塞尔曲线代码在线生成工具 可以快速生成二次.三次贝塞尔曲线的源码生成器,方便经常使用到canvas画图的同学使用,可以直接预览效果随意画出自己想要的图像. 生成源码效果预 ...

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

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

随机推荐

  1. JMeter的下载安装以及运行教程

    一.安装JMeter的必要准备 1.安装JDK JDK下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html ...

  2. 怎么用JavaScript写一个区块链？

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  3. 第二阶段冲刺——two

    个人任务: 王金萱:优化作业查询结果,按学号排列. 马佳慧:测试登录功能并优化. 司宇航:修复博客作业查询功能. 季方:测试博客作业查询功能. 站立会议: 任务看板和燃尽图:

  4. 使用Visual Studio 2013进行单元测试的过程与感想

    首先是安装Visual Studio 2013这个软件,尽管安装过程不复杂,但是安装的时间实在是太长了,经过2个多小时的安装终于装完了. 由于时间紧凑,没来得及装语言包,于是,我用了原装的进行了单元测 ...

  5. 蜗牛慢慢爬 LeetCode 23. Merge k Sorted Lists [Difficulty: Hard]

    题目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...

  6. meta-inf文件夹以及MANIFEST.MF文件的作用

    meta-inf相当于一个信息包,目录中的文件和目录获得Java 2平台的认可与解释,用来配置应用程序.扩展程序.类加载器和服务 manifest.mf文件,在用jar打包时自动生成的. META-I ...

  7. Linux 下安装nginx的总结 (之前写的有问题))

    1. 下载niginx的 tar包 下载路径 http://nginx.org/en/download.html 也可以直接使用命令下载 wget http://nginx.org/download/ ...

  8. FuelPHP 系列（一） ------ Oil 命令

    之前用过 Laravel,框架自带的 artisan 命令,用得爽到爆.现在工作需要,要学习 FuelPHP,首先看到框架目录结构,有 coposer.json 框架可以用 composer 管理,一 ...

  9. 爆打团队 四则运算 beta视频

    爆打团队 四则运算 beta视频链接 http://v.youku.com/v_show/id_XMTU1MjAzNDI0NA==.html?from=s1.8-1-1.2

  10. 修改MyEclipse取消默认工作空间

    使用MyEclipse,在最开始Workspace Launcher中选择工作空间时,勾选了默认选择,以后启动程序的时候,就不会弹出这个选择工作空间的对话框了.如下图: 但后来又新增一个工作空间,需要 ...