注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

HTML5  

2013-08-19 22:58:08|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://zxianf.blog.163.com/blog/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
 <script type="text/javascript">
     $(document).ready(function () {
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.translate(200, 200); //平移  
         //context.fillStyle = 'rgba(120,93,222,0.25)'; //填充  
        
         for (var i = 0; i <=36; i++) {
             //context.translate(25,25);//平移  
             //context.scale(0.98,0.98);//扩大
             if(i<9 )
                 context.strokeStyle = "rgb(237,28,36)";
            else if (i < 18)
                context.strokeStyle = "rgb(29,81,237)";
           else  if (i < 27)
                 context.strokeStyle = "rgb(51,242,23)";
           else if (i < 36)
               context.strokeStyle = "rgb(231,35,221)";

           context.beginPath();
           context.lineTo(100, 0);
           context.lineTo(105, 0);
           context.stroke();

             if (i == 0)
                 context.rotate(Math.PI / 18 * 0);
             else
                 context.rotate(Math.PI / 18); //旋转  


             context.strokeText(i * 10, 80, 0);
             // context.fillRect(50,50,100,50);//画矩形  
         }
        

         context.beginPath();
         //context.moveTo(0, 0);
         context.strokeStyle = "rgb(231,35,221)";
         context.arc(0, 0,10, 0, (Math.PI / 180) * 360);
         context.lineWidth = 1;
         context.stroke();
        

       
         // context.rotate(Math.PI / 180 * -90);  
         context.translate(this.width / 2, this.height / 2); //平移
         context.beginPath();
         context.moveTo(0, 0);
         //context.rotate(Math.PI / 2);
        
         context.moveTo(5, -3);
         context.lineTo(0, 120);
         context.lineTo(-5, -3);
         context.lineTo(5, -3);
         context.fill();


         context.rotate(Math.PI / 180*90);

         context.moveTo(5, -3);
         context.lineTo(0, 120);
         context.lineTo(-5, -3);
         context.lineTo(5, -3);
         context.fill();

         context.rotate(Math.PI / 180 * 90);

         context.moveTo(5, -3);
         context.lineTo(0, 120);
         context.lineTo(-5, -3);
         context.lineTo(5, -3);
         context.fill();


         context.rotate(Math.PI / 180 * 90);

         context.moveTo(5, -3);
         context.lineTo(0, 120);
         context.lineTo(-5, -3);
         context.lineTo(5, -3);
         context.fill();
         
     });  
 </script>
<body>
 <canvas id="canvas" style="border: 1px solid #C9C9C9;" width="400" height="400">  
  </canvas>  
</body>
</html>
  评论这张
 
阅读(390)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017