畫同心圓的方法插掂！
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;
//把坐標(biāo)的中心移動到中點，
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;
//獲取轉(zhuǎn)動的圓的圓心的xx、yy坐標(biāo)的函數(shù)盯仪，傳入的參數(shù)是圍繞的中心點的x、y坐標(biāo)叉抡，轉(zhuǎn)動的半徑痊班，每次轉(zhuǎn)動的角度
function getXY(x, y, r, per) {
var xx = x + Math.cos(per) * r;
var yy = y - Math.sin(per) * r;
return [xx, yy];
}
//定義轉(zhuǎn)的角度的初始值
var per = Math.PI / 12
//封裝動畫的函數(shù)
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
//畫外面轉(zhuǎn)動的圓
context.arc(res[0], res[1], 20, 0, Math.PI * 2);
context.fill();
//增加轉(zhuǎn)動的角度
per += Math.PI / 48;
//執(zhí)行動畫
result = window.requestAnimationFrame(move);
}
move();
//點擊停止動畫
btn.onclick = function() {
//阻止動畫執(zhí)行
window.cancelAnimationFrame(result);
}
面向?qū)ο竺嗥＃瑔蝹€球星碰撞
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();
//定義一個執(zhí)行動畫的函數(shù)
function moveCircle() {
//先清理畫布
context.clearRect(0, 0, canvas.width, canvas.height);
//調(diào)用畫圓的函數(shù)
newCircle.draw();
//調(diào)用運動的函數(shù)
newCircle.move();
//執(zhí)行動畫
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();
//定義一個執(zhí)行動畫的函數(shù)
function moveCircle() {
//先清理畫布
context.clearRect(0, 0, canvas.width, canvas.height);
//調(diào)用畫圓的函數(shù)
newCircle.draw();
//調(diào)用運動的函數(shù)
newCircle.move();
//執(zhí)行動畫
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);
//插入保存的數(shù)組！
arr.push(newCircle);
}
//執(zhí)行
moveCircle();
//定義一個執(zhí)行動畫的函數(shù)
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;
//構(gòu)造函數(shù)
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();
