2012年9月5日

在HTML5的Canvas上绘制椭圆的几种方法

摘要: 概述 html5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同:context为Canvas的2D绘图环境对象,x为椭圆中心横坐标,y为椭圆中心纵坐标,a为椭圆横半轴长,b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆//-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心;a,b分别为椭圆横半轴、//纵半轴长度,不可同时为0//该方法的缺点是,当linWidth较宽,椭圆较扁时//椭圆内部长轴端较为尖锐,不平滑,效率较低function Pa 阅读全文

posted @ 2012-09-05 15:15 djy_fn 阅读(317) 评论(0) 推荐(0) 编辑

使用quadraticCurveTo绘制二次贝赛尔曲线

摘要: Canvas提供了一系列的方法来绘制曲线,比如quadraticCurveTo(通过起始两个点以及一个控制点来绘制,前两个参数为控制点横纵坐标,后两个参数为终点横纵坐标,使用的是数学上的二次贝赛尔方程)。下面我们来看一下常见的一些使用。固定控制点 如下程序,我们实现了一个固定起始点,使用鼠标位置做为控制点,来绘制二次贝赛尔曲线的应用:<!doctype html><html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> 阅读全文

posted @ 2012-09-05 14:34 djy_fn 阅读(561) 评论(0) 推荐(0) 编辑

导航