效果图：

<body>

<canvas id="test" width="800" height="300"></canvas>

<script type="text/javascript">

//一个工具函数，用于将角度从角度制转化成弧度制

function rads(x){ return Math.PI*x/180;}

var canvas = document.getElementById('test');

var c = canvas.getContext("2d");

//绘制一个图形，如果需要椭圆的话则进行相应的缩放和旋转即可

//由于没有当前点，因此绘制的图形不需要当前点到圆形起点之间的直线

c.beginPath();

c.arc(75,100,50,	//圆心位于（75,100），半径为50

	0,rads(360),false);	//从0度到360顺时针旋转

//绘制一个楔，角度从x轴正向顺时针度量

//要注意的是arc（）方法会将当前点和弧形起点用直线相连

c.moveTo(200,100);		//从圆心开始

c.arc(200,100,50,		//圆心和半径

	rads(-60),rads(0),	//从-60度到0度

	false);				//顺时针

c.closePath();			//将半径添加到圆心

//同样的楔，但方向不同

c.moveTo(325,100);

c.arc(325,100,50,

	rads(-60),rads(0),	//从-60度到0度

	true);				//逆时针

c.closePath();			

//使用acrTo（）方法来绘制圆角，绘制一个一点（400,50）位左上角同时还带有不同半径角的正方形

c.moveTo(450,50);			//从上边的中点开始

c.arcTo(500,50,500,150,30);	//添加部分上边和右上角

c.arcTo(500,150,400,150,20);	//添加右上角和右下角

c.arcTo(400,150,400,50,10);	//添加底边和坐下角

c.arcTo(400,50,500,50,0);	//添加走遍左上角

c.closePath();

//二次贝塞尔曲线，一个控制点

c.moveTo(75,250);			//从点（75,200）开始

c.quadraticCurveTo(100,200,175,250);	//画一条以一直到到点（175,250）结束的曲线

c.fillRect(100-3,200-3,6,6);		//标记控制点（100,200）

//三次贝塞尔曲线

c.moveTo(200,250);		//从点（200,250）开始

c.bezierCurveTo(220,220,280,280,300,250);	//画一条以一直到点（300,250）结束的曲线

c.fillRect(200-3,220-3,6,6);		//标记控制点

c.fillRect(280-3,280-3,6,6);

//定义一些图形属性并绘制曲线

c.fillStyle="#aaa";

c.lineWidth = 5;

c.fill();

</script>

</body>

　　

JavaScript+canvas 利用贝塞尔曲线绘制曲线的更多相关文章

  1. javascript -- canvas绘制曲线

    绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...

  2. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  3. OpenGL 实践之贝塞尔曲线绘制

    说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...

  4. canvas绘制曲线

    canvas绘制曲线 方法 quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveT ...

  5. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  6. iOS 使用贝塞尔曲线绘制路径

    使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...

  7. n阶贝塞尔曲线绘制(C/C#)

    原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的.求n阶贝塞尔曲线用到了 德卡斯特里奥算法(De Casteljau's Algorithm) 需要拷贝代码请直接使用本文最 ...

  8. C#中利用LightningChart绘制曲线图表

    最近在做一个“基于C#语言的电炉温控制软件设计”的设计,我在大学并不是专业学习C#语言编程的,对C#的学习研究完全是处于兴趣,所以编程技术也不是很厉害,遇到问题多参照网络上的开源码. 这不,在做这个课 ...

  9. 使用D3绘制图表（2）--绘制曲线

    上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. java 与操作系统同步问题（三）————父亲儿子女儿水果问题

    问题描述:父亲每次都会放一个水果在桌子上,女儿喜欢吃香蕉(只吃香蕉), 儿子喜欢吃苹果(只吃苹果).父亲每次只会随机往桌子上放一个水果(苹果或香蕉),儿子,女儿会来取.使用p.v操作来完成父亲.儿子. ...

  2. java 与操作系统进程同步问题（二）————经典消费者生产者问题

    http://www.cnblogs.com/zyp4614/p/6033757.html (java 与操作系统进程同步问题(一)----互斥问题) 今天写的是最经典的生产者消费者问题,最简单的版本 ...

  3. Nagios配置安装详解

    nagios.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);borde ...

  4. 安装配置rsync服务端

    rsync是类unix系统下的数据镜像备份工具——remote sync.一款快速增量备份工具 Remote Sync,远程同步 支持本地复制,或者与其他SSH.rsync主机同步. rsync使用方 ...

  5. Java经典编程题50道之三十三

    打印出杨辉三角形(要求打印出10行如下图)11 11 2 11 3 3 11 4 6 4 11 5 10 10 5 1 public class Example33 { public static v ...

  6. 如何用python绘制各种图形

    1.环境 系统:windows10 python版本:python3.6.1 使用的库:matplotlib,numpy 2.numpy库产生随机数几种方法 import numpy as np nu ...

  7. backbone中get和fetch的区别

    我也是刚开始接触backbone.js对于里面的很多东西都看过,但是具体在使用起来还是有很多问题,其中一个就是get和fetch的区别,这个让我很纠结,都是获取模型的数据,干嘛要有两个呢?最近好像弄明 ...

  8. 2017年Web前端开发工程师薪资越来越高？

    放眼全球,不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛.供不应求的香饽饽.所以在供不应求的前端招聘市场上,优秀的前端工程师才是有话语权的那一方. 前端开发是做什么的? 前端是互联网时代软件 ...

  9. 页面实现多个定时器（计时器）时选用NSTimer还是GCD？（干货不湿）

    定时器在我们每个人做的iOS项目里面必不可少,如登录页面倒计时.支付期限倒计时等等,一般来说使用NSTimer创建定时器: + (NSTimer *)timerWithTimeInterval:(NS ...

  10. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...