- 昨天看到介绍svg和vml的文章,虽然我的js不咋地,我还是忍住不去找资料学习了一把,下面就简单帮自己总结下吧,也希望对自己和看到的朋友都有帮助。
- 先看一个简单的例子
<head> </head> <body> <canvas id="square" width="20px" height="20px"></canvas> <canvas id="circle" width="20px" height="20px"></canvas> </body>
部分方法说明:
CanvasRenderingContext2D Canvas.getContext(contextID)
使用返回值对象可以对canvas进行绘制void CanvasRenderingContext2D.arc(float x,float y, float r,float startAngle, endangle, boolean counterclockwise)
使用第一二个参数为原点第三个参数为半径第四第五为开始结束角度按照最后个参数顺或逆时针绘制圆弧void CanvasRenderingContext2D.beginPath()
丢弃当前定义的路径并开始一条心的路径void CanvasRenderingContext2D.closePath()
如果画布当前路径是打开的就添加一条线条连接当前点和子路径起点来关闭void CanvasRenderingContext2D.bezierCurveTo()
为当前路径添加一个三次贝塞尔曲线void CanvasRenderingContext2D.clip()
使用当前路径作为连续绘制操作的剪切区域void CanvasRenderingContext2D.fill()
使用fillStyle属性所指定的颜色渐变或模式来绘制当前路径的内部...... - 好,基本明白了上面的内容后就可以对需求作进一步扩展了,现在的需求是画一个简单的饼图,如果需求简单,那么在前台完成时最好不过了,我不在需要下面这样的代码了:
如果数据源并非database,并且固定,只是一个时期的统计,那么拿前台来画图吧,代码如下
应该没什么不合适的吧,虽然我自己也没有实际项目应用过 body {padding:0;margin:0;} - 上面的例子都只在firefox等下有效,IE并不支持,但是没关系,可以从这里找到对IE的支持, 并且提供了一些十分不错的例子
转载于:https://www.cnblogs.com/whoseyourlady/archive/2009/10/13/1582665.html