jQuery + Canvas 伸缩旋转方块

Posted 被遗忘的优雅

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery + 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>

 

以上是关于jQuery + Canvas 伸缩旋转方块的主要内容,如果未能解决你的问题,请参考以下文章

canvas实例:旋转缩放的方块

jQuery + Canvas 旋转的时钟

如何用js+jquery制作旋转动画?

使用vue学习three.js之加载和使用纹理-使用canvas画布上的绘画作为纹理渲染到方块上,使用动态绘画纹理

绚丽爱心和3d旋转方块以及照片墙

canvas 俄罗斯方块