JavaScript+canvas 利用贝塞尔曲线绘制曲线
效果图：
<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 利用贝塞尔曲线绘制曲线的更多相关文章
- javascript -- canvas绘制曲线
绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...
- 基于canvas二次贝塞尔曲线绘制鲜花
canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...
- OpenGL 实践之贝塞尔曲线绘制
说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...
- canvas绘制曲线
canvas绘制曲线 方法 quadraticCurveTo(cp1x, cp1y, x, y) 只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线) bezierCurveT ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- iOS 使用贝塞尔曲线绘制路径
使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...
- n阶贝塞尔曲线绘制(C/C#)
原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的.求n阶贝塞尔曲线用到了 德卡斯特里奥算法(De Casteljau's Algorithm) 需要拷贝代码请直接使用本文最 ...
- C#中利用LightningChart绘制曲线图表
最近在做一个“基于C#语言的电炉温控制软件设计”的设计,我在大学并不是专业学习C#语言编程的,对C#的学习研究完全是处于兴趣,所以编程技术也不是很厉害,遇到问题多参照网络上的开源码. 这不,在做这个课 ...
- 使用D3绘制图表（2）--绘制曲线
上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...
随机推荐
- 极光开发者沙龙 之 移动应用性能优化实践 【一】旧酒新瓶——换个角度提升 App 性能与质量
旧酒新瓶--换个角度提升 App 性能与质量 主讲人:高亮亮 --- 饿了么移动技术部高级iOS工程师,负责饿了么商家版iOS APP开发,对架构和系统底层有深入研究,擅长移动性能分析,troub ...
- Asp.Net Core MVC项目实现多语言（Globalization/Localization）
正好最近手上在给一个Razor MVC项目实现一个多语言功能,叫Globalization也好,Localization也好,whatever.最终要实现的效果呢,就是一键切换全站语言,并且开发的时候 ...
- QT环境的搭建
说到QT大家一定要先了解到底什么是QT,我们通常说的QT是包括:Qt-creactor的集成开发环境(IDE)和Qt的开发工具包(SDK),而Qt-creactor就相当于我们的visio studi ...
- void main（）， int main() 和int main（void）的区别
1.区别是main()函数是否有返回值.2.void定义的函数没有返回值,int定义的函数返回整型值.3.void,字面意思是"无类型",常用在程序编写中对定义函数的参数类型.返回 ...
- Javaweb---如何使用eclipse创建Javaweb项目
在配置好--服务器Tomcat与Eclipse后,进行项目创建 配置地址:http://blog.csdn.net/baidu_37107022/article/details/71405194 流程 ...
- apache和nginx支持SSI配置
今天发现了一种新的语言格式:.shtml 一. 前言 SSI是一种类似于ASP的基于服务器的网页制作技术.将内容发送到浏览器之前,可以使用"服务器端包含 (SSI)"指令将文本.图 ...
- 了解Java
一.计算机程序 为了让计算机执行某些操作或解决某个问题而编写一系列有序指令的集合.二.Java SE(标准版) 1.Java技术的基础和核心: 2.主要由于开发桌面应用 ...
- html打造动画【系列1】- 萌萌的大白
每个人心中都有一个暖暖的大白,blingbling的大眼睛~软软的肚子~宽厚的肩膀~善良的心肠~如果可以,我愿意沦陷在大白的肚子里永远不出来,哈哈~毛球要失宠咯~ 哈哈哈 每个人都是独立的个体,大白也 ...
- UX2 beta 3正式发布！！
UX浏览服务是为了加速浏览网页而开发的浏览服务,它解决了WebView的一系列问题,它能够在网络差的情况下快速的浏览,比webview快一倍以上,是webview的优化代替方案.它拥有完善的缓存管理策 ...
- C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密
FTPS,亦或是FTPES, 是FTP协议的一种扩展,用于对TLS和SSL协议的支持. 本文讲述了如何从一个基于FTPS的Server中下载数据的实例. 任何地方,如有纰漏,欢迎诸位道友指教. ...