Geek Answers Handbook

What can I do to create a jquery reel effect using canvas / div instead of images?

I am working on a web application and I want to have the effect " http://jquery.vostrel.cz/reel .

I want to create this effect using canvas / div instead of images. Has anyone tried this before?

Edit

The code I tried looks like this.

<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>

This I tried to use one Canvas, but I want to use several Canvas.

Please help me solve this problem ....

+4
source share
1 answer

try the following:

 <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>

+1
source

More articles:


All Articles