html块中心轴旋转,html canvas 圆旋转

*{

padding: 0;

margin: 0;

}

canvas{

background-color: black;

}

function clear(){

ctx.beginPath();

ctx.clearRect(0, 0, width, height);

ctx.closePath();

}

function ArcClass(x, y, a){

this.x = x;

this.y = y;

this.angle = a == undefined ? -90 : a;

}

ArcClass.prototype.draw = function(){

if(isArc){

ctx.beginPath();

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

ctx.strokeStyle = "white";

ctx.stroke();

ctx.closePath();

}

var radian = this.angle * Math.PI / 180;

var x = Math.cos(radian) * r + this.x;

var y = Math.sin(radian) * r + this.y;

ctx.beginPath();

ctx.arc(x, y, 10, 0, Math.PI * 2);

ctx.fillStyle = "red";

ctx.fill();

ctx.closePath();

this.angle += 1;

if(this.angle >= 270)

this.angle = -90;

};

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

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

var width = window.innerWidth;

var height = window.innerHeight;

var cx = width / 2;

var cy = height / 2;

var list = new Array();

var r = 100;

var isArc = true;

canvas.width = width;

canvas.height = height;

arcBig();

var id = setInterval(function(){

clear();

ctx.beginPath();

ctx.fillStyle = "#000000";

ctx.fillRect(0, 0, width, height);

ctx.closePath();

list.forEach(function(ball){

ball.draw();

});

// clearInterval(id);

}, 0);

// 一共36个球

// 分为四个阶段 36 / 4 = 9

function arcBig(){

var r = 70;

ctx.beginPath();

ctx.arc(cx, cy, 200, 0, Math.PI * 2);

ctx.strokeStyle = "white";

ctx.stroke();

ctx.closePath();

var a = 90;

for(var angle = -90 ; angle <= 270 ; angle += 10 ){

var radian = angle * Math.PI / 180;

var x = Math.cos(radian) * r + cx;

var y = Math.sin(radian) * r + cy;

// add(x, y, angle); // 传入angle 一起放大一起缩小

// add(x, y, angle - 200); // 控制起始位置

add(x, y, a -= 10); // 3d 旋转

}

}

function add(x, y, a){

var c = new ArcClass(x * 1, y * 1, a);

list.push(c);

return c;

}

标签：canvas,angle,ctx,旋转,html,var,height,Math

来源： https://blog.csdn.net/qq_39237554/article/details/113702900