Chinaunix首页 | 论坛 | 博客

七秒钟记忆

首页　| 　博文目录　| 　关于我

xcgsnowdrop

  • 博客访问： 320813
  • 博文数量： 96
  • 博客积分： 230
  • 博客等级： 二等列兵
  • 技术积分： 722
  • 用 户 组： 普通用户
  • 注册时间： 2012-02-13 22:25
个人简介

心安处即吾乡！

文章分类

全部博文（96）

文章存档

2016年（1）

2014年（79）

2013年（7）

2012年（9）

我的朋友
最近访客
推荐博文
html5+canvas+js实现图形翻转和文字翻转与竖排

分类： HTML5

2014-04-17 20:57:43

代码如下：


点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <script language="javascript">
  5.             function drawBowtie(ctx, fillStyle) {
  6.                 ctx.fillStyle = "rgba(200,200,200,0.3)";
  7.                 ctx.fillRect(-30, -30, 60, 60);
  8.                 ctx.fillStyle = fillStyle;
  9.                 ctx.globalAlpha = 1.0;
  10.                 ctx.beginPath();
  11.                 ctx.moveTo(25, 25);
  12.                 ctx.lineTo(-25, -25);
  13.                 ctx.lineTo(25, -25);
  14.                 ctx.lineTo(-25, 25);
  15.                 ctx.closePath();
  16.                 ctx.strokeText("2012",-15,5);
  17.                 ctx.fill();
  18.                 
  19.             }
  20.             function dot(ctx) {
  21.                 ctx.save();
  22.                 ctx.fillStyle = "black";
  23.                 ctx.fillRect(-2, -2, 4, 4);
  24.                 ctx.restore();
  25.             }
  26.             
  27.             function draw() {
  28.                 var ctx = document.getElementById_x('myCanvas').getContext("2d");
  29.                 // note that all other translates are relative to this
  30.                 // one
  31.                 ctx.translate(100, 100);
  32.                 
  33.                 ctx.save();
  34.                 ctx.translate(0, 0); // unnecessary
  35.                 drawBowtie(ctx, "red");
  36.                 dot(ctx);
  37.                 ctx.restore();
  38.                 
  39.                 ctx.save();
  40.                 ctx.translate(100, 0);
  41.                 ctx.rotate(90 * Math.PI / 180);
  42.                 drawBowtie(ctx, "green");
  43.                 dot(ctx);
  44.                 ctx.restore();
  45.                 
  46.                 ctx.save();
  47.                 ctx.translate(0, 100);
  48.                 ctx.rotate(135 * Math.PI / 180);
  49.                 drawBowtie(ctx, "blue");
  50.                 dot(ctx);
  51.                 ctx.restore();
  52.                 
  53.                 ctx.save();
  54.                 ctx.translate(100, 100);
  55.                 ctx.rotate(90 * Math.PI / 180);
  56.                 drawBowtie(ctx, "yellow");
  57.                 dot(ctx);
  58.                 ctx.restore();
  59.             }
  60.             window.onload=function(){
  61.                 draw();
  62.             }
  63.             </script>
  64.     </head>
  65.     <body>
  66.         <div id="pw_body" style="width:100%;height:100%">
  67.             <canvas id="myCanvas" width="300" height="300"></canvas>
  68.             <script type="text/javascript" src=""></script>
  69.         </div>
  70.     </body>
  71. </html>

效果图如下：


阅读(2410) | 评论(0) | 转发(0) |
0

上一篇：http headers浅解

下一篇：vim常用配置

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6