Trip to Canvas(1)

  1. 昨天看到介绍svg和vml的文章,虽然我的js不咋地,我还是忍住不去找资料学习了一把,下面就简单帮自己总结下吧,也希望对自己和看到的朋友都有帮助。
  2. 先看一个简单的例子
    <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属性所指定的颜色渐变或模式来绘制当前路径的内部
    ......
  3. 好,基本明白了上面的内容后就可以对需求作进一步扩展了,现在的需求是画一个简单的饼图,如果需求简单,那么在前台完成时最好不过了,我不在需要下面这样的代码了:
     

    如果数据源并非database,并且固定,只是一个时期的统计,那么拿前台来画图吧,代码如下


    应该没什么不合适的吧,虽然我自己也没有实际项目应用过 body {padding:0;margin:0;}
  4. 上面的例子都只在firefox等下有效,IE并不支持,但是没关系,可以从这里找到对IE的支持, 并且提供了一些十分不错的例子
    
    

转载于:https://www.cnblogs.com/whoseyourlady/archive/2009/10/13/1582665.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值