在html5画布上移动对象

var canvas = document.getElementById("canvas"); //get the canvas dom object 
var ctx = canvas.getContext("2d"); //get the context 
var c = { //create an object to draw 
    x:0, //x value 
    y:0, //y value 
    r:5; //radius 
} 
var redraw = function(){ // this function redraws the c object every frame (FPS) 
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas 
    ctx.beginPath(); //start the path 
    ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); //draw the circle 
    ctx.closePath(); //close the circle path 
    ctx.fill(); //fill the circle 
    requestAnimationFrame(redraw);//schedule this function to be run on the next frame 
} 
function move(){ // this function modifies the object 
    var decimal = Math.random() // this returns a float between 0.0 and 1.0 
    c.x = decimal * canvas.width; // mulitple the random decimal by the canvas width and height to get a random pixel in the canvas; 
    c.y = decimal * canvas.height; 
} 
redraw(); //start the animation 
setInterval(move, 1000); // run the move function every second (1000 milliseconds)

这是它的小提琴。 http://jsfiddle.net/r4JPG/2/

如果要缓存和翻译，请相应地更改move方法。

来源

2013-10-01 14:07:50 0xcaff

这将移动一个小圆圈在画布

<html> 
<head> 
</head> 
<body> 
    <canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas> 
    <script> 
     var can = document.getElementById('canvas'); 
     can.height = 1000; can.width = 1300; 
     var ctx = can.getContext('2d'); 
     var x = 10, y = 100; 
     ctx.fillStyle = "black"; 
     ctx.fillRect(700, 100, 100, 100); 

     function draw() { 
      ctx.beginPath(); 
      ctx.arc(x, y, 20, 0, 2 * Math.PI); 
      ctx.fillStyle = 'rgba(250,0,0,0.4)'; 
      ctx.fill(); 

      x += 2; 
      ctx.fillStyle = "rgba(34,45,23,0.4)"; 
      ctx.fillRect(0, 0, can.width, can.height); 
      requestAnimationFrame(draw); 
      //ctx.clearRect(0,0,can.width,can.height); 
     } 
     draw(); 

    </script> 
</body> 
</html>

查看示例here！

来源

2014-02-27 05:08:22

这是上面的JSFiddle，以防其他人想要它：http://jsfiddle.net/4fWt5/ – 2014-03-27 14:56:11

<html> 
<head> 
<title>Canvas Exam</title> 
</head> 
<body> 
<canvas id="my_canvas" height="500" width="500" style="border:1px solid black"> 
</canvas> 
<script> 
var dom=document.getElementById("my_canvas"); 
var ctx=dom.getContext("2d"); 
var x1=setInterval(handler,1); 
var x=50; 
var y=50; 
r=40; 
function handler() 
{ 
    ctx.clearRect(0,0,500,500); 
    r1=(Math.PI/180)*0; 
    r2=(Math.PI/180)*360; 
    ctx.beginPath(); 

    //x=x*Math.random(); 
    x=x+2; 
    r=r+10*Math.random(); 
    ctx.arc(x,y,r,r1,r2); 
    ctx.closePath(); 
    ctx.fillStyle="blue"; 
    ctx.fill(); 
    ctx.stroke(); 

    if(x>400) 
{ 
    x=50; 
    y=y+10; 
} 
    r=40; 
} 
</script> 
</body> 
</html>

来源

2017-11-30 04:21:16

在html5画布上移动对象

回答

相关问题