canvas window.requestAnimationFrame

画同心圆的方法!

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var btn = document.getElementById("btn");

var per=Math.PI/12;

var r=150;

var num=0;

//把坐标的中心移动到中点,

context.translate(200,200)

function move(){

//开始画圆

context.beginPath();

context.strokeStyle='red';

context.lineWidth=5;

context.arc(0,0,r,0,Math.PI/12)

context.stroke()

context.rotate(per)

num++;

if(num>72){

r-=20;

num=0;

console.log("hellow")

}

if(r>20){

window.requestAnimationFrame(move)

}

}

move()



三角形 原理 圆周运动

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var btn = document.getElementById("btn");

//定义一个变量保存动画的返回值

var result = null;

//获取转动的圆的圆心的xx、yy坐标的函数,传入的参数是围绕的中心点的x、y坐标,转动的半径,每次转动的角度

function getXY(x, y, r, per) {

var xx = x + Math.cos(per) * r;

var yy = y - Math.sin(per) * r;

return [xx, yy];

}

//定义转的角度的初始值

var per = Math.PI / 12

//封装动画的函数

function move() {

//清理画布

context.clearRect(0, 0, canvas.width, canvas.height)

context.beginPath();

var res = getXY(200, 200, 150, per);

context.fillStyle = "red";

var c=20

//画外面转动的圆

context.arc(res[0], res[1], 20, 0, Math.PI * 2);

context.fill();

//增加转动的角度

per += Math.PI / 48;

//执行动画

result = window.requestAnimationFrame(move);

}

move();

//点击停止动画

btn.onclick = function() {

//阻止动画执行

window.cancelAnimationFrame(result);

}


面向对象,单个球星碰撞

var context = canvas.getContext("2d");

//圆是一个类,就是对象只有一个,就是圆

function Circle(x, y, r, speedX, speedY, color) {

//所有的属性

this.r = r;

this.x = x;

this.speedX = speedX;

this.speedY = speedY;

this.y = y;

this.color = color;

context.beginPath();

context.fillStyle = "green";

context.arc(this.x, this.y, this.r, 0, Math.PI * 2);

context.fill();

}

//在原型上写方法,

//第一个方法,画圆

Circle.prototype.draw = function() {

context.beginPath();

context.fillStyle = this.color;

context.arc(this.x, this.y, this.r, 0, Math.PI * 2);

context.fill();

}

//第二个方法,运动

Circle.prototype.move = function() {

//这里改变x递加的值,可以改变运动速度

this.x += this.speedX;

this.y += this.speedY;

if(this.x >= canvas.width - this.r || this.x <= this.r) {

this.speedX *= -1;

}

if(this.y >= canvas.height - this.r || this.y <= this.r) {

this.speedY *= -1;

}

}

function rand(min,max){

return parseInt(Math.random()*(max-min)+min+1)

}

var r=rand(10,100);

var x= rand(r,canvas.width-r);

var y=rand(r,canvas.height-r);

var color="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")"

var newCircle = new Circle(x, y,r, 2,2 ,color);

moveCircle();

//定义一个执行动画的函数

function moveCircle() {

//先清理画布

context.clearRect(0, 0, canvas.width, canvas.height);

//调用画圆的函数

newCircle.draw();

//调用运动的函数

newCircle.move();

//执行动画

window.requestAnimationFrame(moveCircle);

}



碰撞

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

//圆是一个类,就是对象只有一个,就是圆

function Circle(x, y, r, speedX, speedY, color) {

//所有的属性

this.r = r;

this.x = x;

this.speedX = speedX;

this.speedY = speedY;

this.y = y;

this.color = color;

context.beginPath();

context.fillStyle = "green";

context.arc(this.x, this.y, this.r, 0, Math.PI * 2);

context.fill();

}

//在原型上写方法,

//第一个方法,画圆

Circle.prototype.draw = function() {

context.beginPath();

context.fillStyle = this.color;

context.arc(this.x, this.y, this.r, 0, Math.PI * 2);

context.fill();

}

//第二个方法,运动

Circle.prototype.move = function() {

//这里改变x递加的值,可以改变运动速度

this.x += this.speedX;

this.y += this.speedY;

if(this.x >= canvas.width - this.r || this.x <= this.r) {

this.speedX *= -1;

}

if(this.y >= canvas.height - this.r || this.y <= this.r) {

this.speedY *= -1;

}

}

function rand(min,max){

return parseInt(Math.random()*(max-min)+min+1)

}

var r=rand(10,100);

var x= rand(r,canvas.width-r);

var y=rand(r,canvas.height-r);

var color="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")"

var newCircle = new Circle(x, y,r, 2,2 ,color);

moveCircle();

//定义一个执行动画的函数

function moveCircle() {

//先清理画布

context.clearRect(0, 0, canvas.width, canvas.height);

//调用画圆的函数

newCircle.draw();

//调用运动的函数

newCircle.move();

//执行动画

window.requestAnimationFrame(moveCircle);

}


多圆运动

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

//圆是一个类,就是对象只有一个,就是圆

function Circle(x, y, r, speedX, speedY, color) {

//所有的属性

this.r = r;

this.x = x;

this.speedX = speedX;

this.speedY = speedY;

this.y = y;

this.color = color;

context.beginPath();

context.fillStyle = "green";

context.arc(this.x, this.y, this.r, 0, Math.PI * 2);

context.fill();

}

//在原型上写方法,

//第一个方法,画圆

Circle.prototype.draw = function() {

context.beginPath();

context.fillStyle = this.color;

context.arc(this.x, this.y, this.r, 0, Math.PI * 2);

context.fill();

}

//第二个方法,运动

Circle.prototype.move = function() {

//这里改变x递加的值,可以改变运动速度

this.x += this.speedX;

this.y += this.speedY;

if(this.x >= canvas.width - this.r || this.x <= this.r) {

this.speedX *= -1;

}

if(this.y >= canvas.height - this.r || this.y <= this.r) {

this.speedY *= -1;

}

}

function rand(min, max) {

return parseInt(Math.random() * (max - min) + min + 1)

}

var arr=[];

for(i = 0; i < 100; i++) {

var r = rand(10, 50);

var x = rand(r, canvas.width - r);

var y = rand(r, canvas.height - r);

var speedx=rand(1,10);

var speedy=rand(1,10)

var color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")"

//实例化

var newCircle = new Circle(x, y, r, speedx, speedy, color);

//插入保存的数组!

arr.push(newCircle);

}

//执行

moveCircle();

//定义一个执行动画的函数

function moveCircle() {

//先清理画布

context.clearRect(0, 0, canvas.width, canvas.height);

for(var i=0;i


自由落体

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var y = 0;

var lastTime;

//构造函数

function Rect(x, y, w, h, speedY) {

this.x = x;

this.y = y;

this.w = w;

this.h = h;

this.speedY = speedY;

}

//原型里面加方法

Rect.prototype.draw = function() {

context.beginPath();

context.fillStyle = "red";

context.fillRect(this.x, this.y, this.w, this.h);

}

Rect.prototype.move = function() {

//涌动的时间

var nowTime=new Date();

//时间差

var t=nowTime-lastTime;

//移动后的距离!

// 自由落体公式

var distance=9.8*t*t/2/283460;

this.y += distance;

//判断停止条件

if(this.y > (canvas.height - this.h)) {

this.y = canvas.height - this.h;

}

window.requestAnimationFrame(move);

}

var newRect = new Rect(200, 0, 50, 50, 2);

newRect.draw();

//移动

function move() {

context.clearRect(0, 0, canvas.width, canvas.height);

newRect.draw();

newRect.move();

}

canvas.onclick = function() {

lastTime=new Date();

move();

}

你可能感兴趣的:(canvas window.requestAnimationFrame)