UDN-企业互联网技术人气社区

板块导航

浏览  : 786
回复  : 1

[HTML5] Canvas标签的应用-绘制坐标变换图形

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 01:14:16 | 显示全部楼层 |阅读模式
    绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,就能实现这种效果。

    在计算机上绘制图形的时候,是以坐标点为基准来进行绘制的,默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点,并以像素为单位来进行绘制的。

    如果对这个坐标轴进行改变,那么就可以实现图形的变换处理了。对坐标的变换处理有以下三种方式:

    平移

   
使用图形上下文对象的translate方法移动坐标轴原点,该方法定义如下:

  1. cantext.translate(x, y);
复制代码

    x:表示横坐标,也就是将坐标轴x从原点向【左】移动多少个单位,默认以像素为单位
    y:表示纵坐标,也就是将坐标轴y从原点向【下】移动多少个单位,默认以像素为单位

    扩大


    使用图形上下文对象的scale方法将图形放大,该方法的定义如下所示:


  1. cantext.scale(x, y);
复制代码

    x:表示横坐标,也就是【水平方向】将图形放大的倍数
    y:表示纵坐标,也就是【垂直方向】将图形放大的倍数


    注:将图形缩小的时候,将这两个参数设置为0-1之间的小数就可以了,比如,0.5表示将图形缩小一半。

    旋转


    使用图形上下文对象的rotate方法将图形进行旋转,该方法的定义如下所示:


  1. cantext.rotate(angle);
复制代码

    angle:是指旋转的角度,旋转的中心点是坐标轴的原点。旋转方向为顺时针进行,要想逆方旋转,只需要设置为负数即可。

    下面的案例,就是使用这三种坐标变换方式共同实现的下图效果:

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5.         <title>HTML5每日一练之Canvas标签的应用-绘制坐标变换图形</title>
  6.                 <script type="text/javascript">
  7.                 window.onload = function()
  8.                  {
  9.                         var canvas = document.getElementById("W3Cfuns_canvas");
  10.                         var context = canvas.getContext("2d");
  11.                         context.fillStyle = "#d4d4d4";
  12.                         context.fillRect(0, 0, 400, 300);
  13.                         //绘制图形
  14.                         context.translate(200, 25);
  15.                         context.fillStyle = "rgba(0, 0, 255, 0.25)";
  16.                         for(var i = 0; i < 50; i++)
  17.                         {
  18.                                 context.translate(25, 25);
  19.                                 context.scale(0.95, 0.95);
  20.                                 context.rotate(Math.PI / 10);
  21.                                 context.fillRect(0, 0, 100, 50);
  22.                         }
  23.                 }
  24.         </script>
  25.     </head>
  26.    
  27.     <body>
  28.             <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
  29.     </body>
  30. </html>
复制代码



拓展阅读:





相关帖子

发表于 2015-9-17 15:25:59 | 显示全部楼层
HTML5还是很有前景的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部