画同心圆的方法！
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();
