zoukankan      html  css  js  c++  java
  • html5画布的旋转效果

    keleyi.htm的代码如下:

     1 <!DOCTYPE HTML> 
     2 <html>
     3 <head>
     4 <title>html旋转画布-柯乐义</title>
     5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
     6 <script type="text/javascript" src="keleyi.js"></script>
     7 </head>
     8 <body>
     9 <canvas id="keleyi"></canvas>
    10 </body>
    11 </html>

    keleyi.js的代码如下:

     1 /*
     2 * 功能:画布旋转
     3 * http://keleyi.com
     4 * 柯乐义 copyright
     5 */
     6 (function(){
     7     var canvas=null,
     8     context=null,
     9     angle=0;
    10     function resetCanvas(){
    11         canvas=document.getElementById("ke"+"leyi");
    12         canvas.width=window.innerWidth;
    13         canvas.height=window.innerHeight;
    14         context=canvas.getContext("2d");
    15     }
    16     function animate(){
    17         context.save();
    18         try{
    19             //清除画布
    20             context.clearRect(0, 0, canvas.width, canvas.height);
    21             //设置原点
    22             context.translate(canvas.width * 0.5, canvas.height * 0.5);
    23             //旋转角度
    24             context.rotate(angle);
    25             //设置填充颜色
    26             context.fillStyle = "#FF0000";
    27             //绘制矩形
    28             context.fillRect(-30, -30, 60, 60);
    29             angle += 0.05 * Math.PI;
    30         }
    31         finally{
    32             context.restore();
    33         }
    34     }
    35     $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);
    36     $(document).ready(function(){
    37         window.scrollTo(0,1);
    38         resetCanvas();
    39         setInterval(animate,40);
    40     });
    41 })();

    http://www.cnblogs.com/sosoft/

  • 相关阅读:
    React
    移动端
    Flask 框架小记
    PyTorch 学习
    CNN 小结
    Django 环境下常用的模型设计
    Linux用户和用户组
    Linux下查看进程的命令输出的内容解释
    linux下配置tomcat开机自启动
    商业智能概述
  • 原文地址:https://www.cnblogs.com/sosoft/p/3470320.html
Copyright © 2011-2022 走看看