4

我正在开发一个网络应用程序，我想产生类似“ http://jquery.vostrel.cz/reel ”的效果。

我想使用画布/div而不是图像来创建这种效果，有没有人尝试过这个？

编辑

我试过的代码如下。

<body>
    <canvas width="1280" height="720" id="pageCanvas">
        You do not have a canvas enabled browser
    </canvas>
    <script>
        var context = document.getElementById('pageCanvas').getContext('2d');
        var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }

        function drawRandomlyColoredRectangle() {  
            <!-- clear the drawing surface -->
            context.clearRect(0,0,1280,720);
            <!-- you can also stroke a rect, the operations need to happen in order -->
            incrementAngle();
            context.save();                
            context.lineWidth = 10;  
            context.translate(200,200);
            context.rotate(convertToRadians(angle));
            <!-- set the fill style -->
            context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            context.fillRect(-25,-25,50,50);
            context.strokeRect(-25,-25,50,50);                
            context.restore();
        }

        setInterval(drawRandomlyColoredRectangle, 20);
    </script>
</body>

我曾尝试使用一个 Canvas，但我想使用多个 Canvas。

请指导我解决这个问题......

4

1 回答 1

1

尝试这个：

<body>

<canvas width="1280" height="720" id="pageCanvas1">
    You do not have a canvas enabled browser
</canvas>
<canvas width="1280" height="720" id="pageCanvas2">
    You do not have a canvas enabled browser
</canvas>
<script>
    var draw = function (canvasid){
         var context = document.getElementById(canvasid).getContext('2d');
         var angle = 0;

        var convertToRadians = function(degree) {
            return degree*(Math.PI/180);
        }

        var incrementAngle = function() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }

        var drawRandomlyColoredRectangle = function(){ 
             <!-- clear the drawing surface -->
            context.clearRect(0,0,1280,720);
            <!-- you can also stroke a rect, the operations need to happen in order -->
            incrementAngle(angle);
            context.save();                
            context.lineWidth = 10;  
            context.translate(200,200);
            context.rotate(convertToRadians(angle));
            <!-- set the fill style -->
            context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            context.fillRect(-25,-25,50,50);
            context.strokeRect(-25,-25,50,50);                
            context.restore();
        }
        return {
            'start' : function(){

                setInterval(drawRandomlyColoredRectangle, 20);
            },
            'getContext' :function(){

                return context;
            } 
        };
    } 

    draw("pageCanvas1").start(); 
    draw("pageCanvas2").start();
</script>

于 2013-06-04T09:34:54.343 回答