效果图:

<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. vue+vux+axios+vuex+vue-router的项目的理解

    本文主要是讲解项目前期的工作,后期考虑再详细说明. 作为一个技术团队如果你们团队选择了上面的技术栈,这说明你们的技术团体对于vue有很熟练的掌握了.在这里我想说明的是前期架构的重要.这里有一遍博客写的 ...

  2. Python教程(2.1)——控制台输入

    这一节,我们来学习如何写一个简单的Python程序. 我们知道,很多编程语言一开始就是学习怎么输出"Hello, world",对吧?那么,现在我们来学习怎么用Python输出&q ...

  3. Publishing failed with multiple errors.问题解决

    问题:Publishing failed with multiple errors.(发布失败与多个错误) 原因:项目工程文件删除,但eclipse里面仍显示存在. 解决方案:刷新项目工程,重新部署, ...

  4. JavaScript设计模式_03_代理模式

    代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最 ...

  5. PHPstrom的Disable Power Save Mode

    1.安装好phpstorm之后 发现代码高亮和函数自动提示都失效了 网上有人说可能是Power save mode的原因开始没找到这个设置在哪 后来在底部面板的信息提示处发现有一条系统消息: 17:0 ...

  6. WAF指纹探测及识别技术

    Web应用防护系统(也称:网站应用级入侵防御系统.英文:Web Application Firewall,简称: WAF).利用国际上公认的一种说法:Web应用防火墙是通过执行一系列针对HTTP/HT ...

  7. .NET 随记

    1. goto 常用于 switch语句中2. 字符串相加用 StringBuilder的Append()方法性能好3. str.Trim(',') 清除字符串后的","4. st ...

  8. PHP中常量和变量的区别

    1.常量只能赋一次值: 以下是申请常量的两种方法: const THE_VALUE="one"; define("THE_VALUE","one&qu ...

  9. Mysql数据库存储emoji表情

    emoji表情需要使用编码格式未utf8mb4,mysql数据库版本要5.5以上,我用的是5.6,因为只有5.5以上支持utf8mb4. 1.数据库编码设定为utf8mb4,如果建库时指定的是utf8 ...

  10. 委托(C#)

    委托,delegate 关键字用于声明一个引用类型,该引用类型可用于封装命名方法或匿名方法.委托类似于 C++ 中的函数指针:但是,委托是类型安全和可靠的.委托类型声明的格式如下: public de ...