<!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. BCompare破解方法

    1.删除 BCUnrar.dll 文件,重启软件. 备注:使用everything搜索BCUnrar.dll

  2. PAT甲题题解1098. Insertion or Heap Sort (25)-（插入排序和堆排序）

    题目就是给两个序列,第一个是排序前的,第二个是排序中的,判断它是采用插入排序还是堆排序,并且输出下一次操作后的序列. 插入排序的特点就是,前面是从小到大排列的,后面就与原序列相同. 堆排序的特点就是, ...

  3. freopen stdout 真的更快？

    freopen stdout 真的更快? 在一次数独作业中,我发现大部分同学提交的代码中都使用 freopen 来将 stdout 重新指向目标文件进行文件输出操作.我感到十分好奇,关于 freope ...

  4. Linux命令（一） pwd ，cd

    1.pwd命令 以绝对路径的方式显示当前所处的工作目录,从根目录 / 开始,每一级目录用 / 分隔.第一个 / 表示根目录,最后一个目录是当前目录.当不知道当前处于哪个目录的时候,使用 pwd 命令就 ...

  5. 顺序表的C、C++实现

    一个线性表表实现,函数声明放在 line_list.h 头文件汇总,函数定义放在line_list.c 中,main.c 用来测试各个函数. 1.文件 line_list.h // line_list ...

  6. golang curl

    /** 1.可设置代理 2.可设置 cookie 3.自动保存并应用响应的 cookie 4.自动为重新向的请求添加 cookie */ package curl import ( "net ...

  7. Session, Cookie区别

    答: 1.Session由应用服务器维护的一个服务器端的存储空间:Cookie是客户端的存储空间,由浏览器维护. 2.用户可以通过浏览器设置决定是否保存Cookie,而不能决定是否保存Session, ...

  8. MySQL:日期类型

    1. datetime(年月日时分秒) 格式:‘YYY-MM-DD HH:MM:SS’. 占用:8字节 范围:1000-01-01 00:00:00 到 9999-12-31 23:59:59. ti ...

  9. 一本通1644【例 4】佳佳的 Fibonacci

    1644:[例 4]佳佳的 Fibonacci 时间限制: 1000 ms         内存限制: 524288 KB sol:搞了大概一个多小时什么结果都没,被迫去看题解,感觉自己菜到家了qaq ...

  10. LOJ #2145. 「SHOI2017」分手是祝愿

    题目链接 LOJ #2145 题解 一道画风正常的--期望DP? 首先考虑如何以最小步数熄灭所有灯:贪心地从大到小枚举灯,如果它亮着则修改它.可以求出总的最小步数,设为\(cnt\). 然后开始期望D ...