HTML5 Canvas: 用路径描画曲线
来源:互联网 发布:剑三纯阳成女捏脸数据 编辑:程序博客网 时间:2024/04/28 00:31
原文:
http://www.lifelaf.com/blog/?p=380
在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线:
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
贝塞尔曲线是在二维平面上由一个“起始点”,一个“结束点”,以及一个或多个“控制点”定义的曲线。普通的三阶贝塞尔曲线使用两个控制点,而二阶曲线则只使用一个控制点。
要描画二阶贝塞尔曲线,只需设置结束点的坐标和控制点的坐标即可:
context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);
上面例子中的曲线从坐标(0,0)开始,到(0,50)结束,而用于控制曲线描绘的控制点的坐标为(100,25)。
相比二阶曲线,由于可以设置两个控制点,三阶贝塞尔曲线的描画更为灵活。下面的代码描画了一条”S”形的曲线:
context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);
译注1:关于贝塞尔曲线,可以参考Wikipedia上的条目(http://en.wikipedia.org/wiki/Bézier_curve),其中的动画很好地诠释了贝塞尔曲线的生成机制。
译注2:目前HTML5 Canvas最高仅支持三阶贝塞尔曲线,四阶以上的曲线尚不支持。
- HTML5 Canvas: 用路径描画曲线
- HTML5 Canvas: 用路径描画线条
- HTML5 Canvas: 用路径描画圆弧
- html5 canvas 绘制贝塞尔曲线
- html5 canvas绘制路径
- HTML5开发实例-使用canvas绘制曲线
- HTML5 canvas贝塞尔曲线_图解贝塞尔
- html5中canvas贝塞尔曲线绘制菊花
- html5中canvas绘制贝塞尔曲线
- Html5 canvas学习2-圆 贝塞尔曲线
- HTML5 Canvas 起步(2) - 路径
- HTML5 Canvas 绘制路径实例
- HTML5实战—canvas绘图之贝塞尔曲线
- html5 Canvas画图6:画曲线之arcTo
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- HTML5 Canvas 初步:字符串,路径,背景,图片
- HTML5中canvas画图之绘制路径
- html5 canvas学习--裁切路径
- 数组类
- eclipse中的联想输入
- jpa使用两个数据源 javax.ejb.EJBException: org.hibernate.exception.GenericJDBCException: Cannot open conne
- EOJ大牛博客汇总
- 源码1 禁用拷贝构造函数 重载=运算符,以禁用=赋值 字符串拆分
- HTML5 Canvas: 用路径描画曲线
- PAT (Basic Level) Practise (中文)—— 1003. 我要通过!
- 内存屏障浅析
- 熬之滴水穿石:Servlet--Web万物之源(5)
- linux进程存储管理--进程内存结构
- Kendo UI开发教程(1): 概述
- 总算可以写文章了
- hibernte中用criteria实现not in功能的方法
- EXT 在windows里面同时显示两个form表单