HTML5 Canvas 小例子伸缩旋转方块

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <script type="text/javascript" src="jQuery.js"></script>

</head>

<style type="text/css">

    body {

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas {

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas>span {

        color: white;

        font-size: 14px;

    }

</style>

<body>

    <canvas id="canvas" width="600" height="500">

    <span>您的浏览器不支持</span>

</canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    var canvas = oc.getContext('2d');

    /*偏移*/

    canvas.translate(200, 200);

    var num = 0, multiple = 1, value = 1;

    setInterval(function(){

        num++;

        if(multiple == 100 || multiple == 0){

            value *= -1;

        }

        multiple += value;

        /*局面canvas的起始点*/

         canvas.save();

         /*图形倍数(横向放大倍数,纵向放大倍数)*/

         canvas.scale(multiple*1/50, multiple*1/50);

         /*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/

        canvas.clearRect(-150, -150, oc.width, oc.height);

        /*旋转弧度*/

        canvas.rotate(num*Math.PI/180);

        /*偏移旋转中心*/

        canvas.translate(-50, -50);

        /*填充方块*/

        canvas.fillRect(0, 0, 100, 100);

        /*局面canvas的结束点*/

        canvas.restore();

    }, 30);

</script>
HTML5 Canvas 小例子 伸缩旋转方块

HTML5 Canvas 小例子伸缩旋转方块
