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

板块导航

浏览  : 1513
回复  : 1

[HTML5] Canvas标签的应用-坐标变换与路径结合使用

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 01:20:28 | 显示全部楼层 |阅读模式
     到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢?

     我们需要对矩形变形,使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候,那么要考虑的事情就 多了。因为使用坐标变换之后,已经创建好的路径就不可用了。必须要重新创建路径,重新创建路径后,坐标变换方法又失效了。

     解决思路

    1、必须先另外绘制一个创建路径的函数。
    2、在坐标变幻的同时调用该函数。

    代码案例

  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.                         createPic();
  10.                 }
  11.                
  12.                 //创建图形
  13.                 function createPic()
  14.                 {
  15.                         var canvas = document.getElementById("W3Cfuns_canvas");
  16.                         var context = canvas.getContext("2d");
  17.                         context.fillStyle = "#d4d4d4";
  18.                         context.fillRect(0, 0, 400, 300);
  19.                         //绘制图形
  20.                         context.translate(200, 50);
  21.                         for(var i = 0; i < 50; i++)
  22.                         {
  23.                                 context.translate(25, 25);
  24.                                 context.scale(0.95, 0.95);
  25.                                 context.rotate(Math.PI / 8);
  26.                                 createStar(context);//此方法专门绘制五角星
  27.                                 context.fill();
  28.                         }
  29.                 }
  30.                
  31.                 //创建五角星的方法
  32.                 function createStar(c)
  33.                 {
  34.                         var n = 0;
  35.                         var dx = 100;
  36.                         var dy = 0;
  37.                         var s = 50;
  38.                         var x = Math.sin(0);
  39.                         var y = Math.cos(0);
  40.                         var dig = Math.PI / 5 * 4;
  41.                         //创建路径
  42.                         c.beginPath();
  43.                         c.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
  44.                         for(var i = 0; i < 5; i++)
  45.                         {
  46.                                 x = Math.sin(i * dig);
  47.                                 y = Math.cos(i * dig);
  48.                                 c.lineTo(dx + x * s, dy + y * s);
  49.                         }
  50.                         c.closePath();
  51.                 }
  52.                
  53.                 //小于10补零
  54.                 function addZero(string){return string.length == 2 ? string : '0' + string;}
  55.                
  56.                 //随即颜色
  57.                 function toRGB(redValue, greenValue, blueValue)
  58.                 {
  59.                         var
  60.                                 rgbR = addZero(redValue.toString(16), 2),
  61.                                 rgbG = addZero(greenValue.toString(16), 2),
  62.                                 rgbB = addZero(blueValue.toString(16), 2);
  63.                         var rgb = "#" + rgbR + rgbG + rgbB;
  64.                         return rgb;
  65.                 }
  66.         </script>
  67.     </head>
  68.    
  69.     <body>
  70.             <canvas id="W3Cfuns_canvas" width="400" height="300"></canvas>
  71.     </body>
  72. </html>
复制代码




拓展阅读:


8EAB8843-869F-423E-96BD-4F34FED434ED.png

相关帖子

发表于 2015-9-17 15:26:22 | 显示全部楼层
唉,捧了这么久,HTML5还是没热起来
使用道具 举报

回复

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

本版积分规则

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