<!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. OpenGL(3)-三角形

    写在前面 从这节开始,会接触到很多基本概念,原书我也是读了很多遍,一遍一遍去理解其中的意思,以及他们之间的关系. 概念 顶点数组对象:VAO 顶点缓冲对象:VBO 索引缓冲对象:EBO|IBO Ope ...

  2. dp算法之平安果路径问题c++

    前文:https://www.cnblogs.com/ljy1227476113/p/9563101.html 在此基础上更新了可以看到行走路径的代码. 代码: #include <iostre ...

  3. Quartz带参数任务的创建与修改

    需求背景:创建的quartz任务需要用到三个参数,根据参数去执行并将结果入库,并且参数可修改更新. 这里,有三个参数需要传入,分别是planId.target.officeId 定义Job类: pub ...

  4. SQL Sever——远程过程调用失败（0x800706be）

    最近重装了系统,VS和SQL Sever莫名奇妙的不能用了.下面总结一下这个过程中遇到的问题,跟大家分享一下经验~~ 大概是以前的安装过程都十分顺利,这次,在尝试了数次登陆不上去之后,我仍然怀疑是自己 ...

  5. 云平台项目--学习经验--打包压缩工具requirejs

    requirejs是一个JavaScript模块加载器.适合在浏览器中国使用,也可以在其他脚本环境使用,它鼓励了代码的模块化.使用RequireJS加载模块化脚本将提高代码的加载速度和质量.如何加载R ...

  6. sql server获取当前月的天数

    方法1 SELECT 32-DAY(getdate()+32-DAY(getdate())) 方法2 CREATE FUNCTION dbo.fn_getMonthDayAll ---自定义函数名称 ...

  7. 一本通1639Biorhythms

    1639:Biorhythms 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 原题来自:POJ 1006 人生来就有三个生理周期,分别为体力.感情和智力周期 ...

  8. 【题解】 bzoj1923: [Sdoi2010]外星千足虫 （线性基/高斯消元）

    bzoj1923,戳我戳我 Solution: 这个高斯消元/线性基很好看出来,主要是判断在第K 次统计结束后就可以确定唯一解的地方和\(bitset\)的骚操作 (我用的线性基)判断位置,我们可以每 ...

  9. R vs Python，数据分析中谁与争锋？

    R和Python两者谁更适合数据分析领域?在某些特定情况下谁会更有优势?还是一个天生在各方面都比另一个更好? 当我们想要选择一种编程语言进行数据分析时,相信大多数人都会想到R和Python——但是从这 ...

  10. 后Hadoop时代的大数据技术思考：数据即服务

    1. Hadoop 的神话正在破灭 IBM leads BigInsights for Hadoop out behind barn. Shots heard IBM has announced th ...