<!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. Git提交空目录

    1.git仅跟踪文件的变动,不跟踪目录.如果需要提交空目录,可以在里面添加 .gitignore 文件,方法如下: find . -type d -empty -exec touch {}/.giti ...

  2. 矩阵分解----Cholesky分解

    矩阵分解是将矩阵拆解成多个矩阵的乘积,常见的分解方法有 三角分解法.QR分解法.奇异值分解法.三角分解法是将原方阵分解成一个上三角矩阵和一个下三角矩阵,这种分解方法叫做LU分解法.进一步,如果待分解的 ...

  3. Linux 上传代码到github

    1.git init 初始化 2.git clone将刚刚创建的项目克隆下来 git clone https://github.com/... 3.进入到Project,编写代码 4.项目完成后执行g ...

  4. metasploit学习之情报搜集

    3.1.被动信息搜集whois查询Netcraft nslookup>set type=mx>testfire.net Google Hacking 3.2 主动信息搜集 使用nmap进行 ...

  5. C++ 继承和派生介绍

    继承(inheritance)是软件重用的一种方式,程序员通过继承可以吸收已有类的数据和行为来创建新类,并可以添加新的数据和行为来增强类的功能.创建新类时,并不需要创建全新的数据和成员函数,我们可以指 ...

  6. 团队作业week7

    软件分析和用户需求调查 具体细则见: http://www.cnblogs.com/xinz/p/3308608.html

  7. java实验项目报告

            JAVA课程项目报告   题目:利用java实现一个时钟的小程序 姓名:王国梁 班级:计科13-2 学号:201303011200         利用JAVA实现一个时钟的小程序 1 ...

  8. DEP

    DEP(Data execution protect)数据执行保护,这个功能需要操作系统和硬件的共同支持才可以生效.DEP的原理就是在系统的内存页中设置了一个标志位,标示这个内存页的属性(可执行). ...

  9. ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接（三）

    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(三) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (三)配置远程桌面连接访问dock ...

  10. Elasticsearch学习系列之term和match查询

    lasticsearch查询模式 一种是像传递URL参数一样去传递查询语句,被称为简单查询 GET /library/books/_search //查询index为library,type为book ...