Html5 Canvas動畫旋轉的小方塊；

時間 2019-11-09

原文原文鏈接

<!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/xVbPLJhtml

相關標籤/搜索