zoukankan      html  css  js  c++  java
  • Html5 Canvas动画旋转的小方块;

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>html5 Canvas动画旋转的小方块;</title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <script>
            window.onload=function(){
                var canvas = document.querySelector("canvas");
                canvas.width = canvas.height = 500
                canvas.style.background = "red"
                if (canvas.getContext) {
                    var ext = canvas.getContext("2d");
                    var num = 0;
                    var scale=0;
                    var value=0
                    ext.fillStyle = "#f90";
                    ext.translate(canvas.width / 2, canvas.height / 2);
                    function rotate() {
                        ext.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height)
                        num++;
                         if(scale==100){
                             value=-1;
                         }else if(scale==0){
                             value=1
                         } 
                         scale+=value 
                        ext.save();
                        ext.rotate(num * Math.PI / 180)
                        ext.scale(scale*1/50,scale*1/50)
                        console.log(scale);
                        ext.translate(-50, -50)
                        ext.fillRect(0, 0, 100, 100);
                        ext.restore();
                    }
                    var t=setInterval(rotate,30);
                    canvas.onmouseover=function(){
                        clearInterval(t);
                    } 
                    canvas.onmouseout=function(){
                        t=setInterval(rotate,30);
                    } 
                }
            }
        </script>
        <canvas></canvas>
    </body>
    </html>

     DEMO地址:http://codepen.io/jonechen/pen/xVbPLJ

  • 相关阅读:
    基于apache httpclient 调用Face++ API
    布隆过滤器(BloomFilter)持久化
    布隆过滤器
    基于firebird的数据转存
    kafka和rabbitmq对比
    python操作rabbitmq
    TCP窗口
    python操作kafka实践
    python使用etcd
    快速排序的python实现
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5038407.html
Copyright © 2011-2022 走看看