<!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. mount命令详解及常见问题汇总

    一 .mount命令(用来挂载硬盘或镜像等) 用法:mount [-t vfstype] [-o options] device dir1.-t vfstype 指定文件系统的类型,通常不必指定.mo ...

  2. MYSQL数据库封装类

    <?phpclass DBDA{    public $host="localhost";    public $uid="root";    publi ...

  3. Photoshop的混合模式

    1.亮度是一种颜色的相对亮度,饱和度是指一种颜色的纯度(颜色中包含多少灰) 2.混合模式 下层图片的颜色像素称为"基本颜色":选定的称为"混合"颜色,对于大部分 ...

  4. 使用jmeter 上传文件

    1.上传图片至阿里云时参数使用的parameters ,所以http的消息头中并没有添加content-type ,如果消息头中添加了Content-Type: multipart/form-data ...

  5. [知乎]关于WindowsXPx64SP2系统的说明

    自己简单安装了下发现 winxpsp3x86的系统版本为: 然后windowsXPx64sp2的版本为:   作者:qpi667链接:https://www.zhihu.com/question/29 ...

  6. [转帖]你们知道LTE Cat.1到Cat.10 那Cat.0呢？

    你们知道LTE Cat.1到Cat.10 那Cat.0呢? https://network.pconline.com.cn/638/6389637_all.html#content_page_3 1大 ...

  7. java学习之switch 等值判断

    当匹配到相等的值时候 则进入case里面执行语句 当该语句有break时候 则退出匹配 当没有break时候 则继续往下匹配 直到遇到break才停止匹配

  8. 数位DP复习小结

    转载请注明原文地址http://www.cnblogs.com/LadyLex/p/8490222.html 之前学数位dp的时候底子没打扎实 虚的要死 这次正好有时间……刷了刷之前没做的题目 感觉自 ...

  9. poj 1511 Invitation Cards（最短路中等题）

    In the age of television, not many people attend theater performances. Antique Comedians of Malidine ...

  10. C++并发编程之std::future

    简单地说,std::future 可以用来获取异步任务的结果,因此可以把它当成一种简单的线程间同步的手段.std::future 通常由某个 Provider 创建,你可以把 Provider 想象成 ...