利用canvas画几个好玩的星云物种。第一步定义一个canvas，第二步javascript执行！下面web建站小编给大家介绍一下代码！
1、定义一个canvas
<canvas id="C"></canvas>
2、javascript运行代码
window.onload = function () {
let ctx = document.getElementById("C"),
c = ctx.getContext("2d"),
w,
h;
fitCanvas();
let mouse = {x: w/2, y: h/4},
last_mouse = {};
function curcumicenter(A,B,C){
let D = 2*(A.x*(B.y-C.y)+B.x*(C.y-A.y)+C.x*(A.y-B.y));
let S = {
x: (1/D)*((A.x*A.x+A.y*A.y)*(B.y-C.y)+(B.x*B.x+B.y*B.y)*(C.y-A.y)+(C.x*C.x+C.y*C.y)*(A.y-B.y)),
y: (1/D)*((A.x*A.x+A.y*A.y)*(C.x-B.x)+(B.x*B.x+B.y*B.y)*(A.x-C.x)+(C.x*C.x+C.y*C.y)*(B.x-A.x))
}
return S;
}
function dist(A,B){
return Math.sqrt(Math.pow(A.x-B.x,2)+Math.pow(A.y-B.y,2));
}
class point{
constructor(x,y){
this.x = x;
this.y = y;
this.shown = false;
}
update(x,y){
this.x = x;
this.y = y;
}
show(color,size){
if(!this.shown){
c.fillStyle=color;
c.fillRect(this.x-size/2,this.y-size/2,size,size);
this.shown = true;
}
}
cleanup(){
this.shown = false;
}
}
class triangle{
constructor(A,B,C){
this.a = A;
this.b = B;
this.c = C;
this.scc = curcumicenter(A,B,C);
this.s = new point(this.scc.x,this.scc.y);
this.x = dist(this.s,this.a);
this.c1 = dist(this.a,this.b)/2;
this.c2 = dist(this.b,this.c)/2;
this.c3 = dist(this.c,this.a)/2;
this.a2ab = Math.atan2(this.a.y-this.b.y,this.a.x-this.b.x);
this.a2bc = Math.atan2(this.b.y-this.c.y,this.b.x-this.c.x);
this.a2ca = Math.atan2(this.c.y-this.a.y,this.c.x-this.a.x);
this.rab = Math.sqrt(this.x*this.x-this.c1*this.c1);
this.rbc = Math.sqrt(this.x*this.x-this.c2*this.c2);
this.rca = Math.sqrt(this.x*this.x-this.c3*this.c3);
this.s1 = new point(
this.s.x+(this.rab/2)*Math.cos(this.a2ab+Math.PI/2),
this.s.y+(this.rab/2)*Math.sin(this.a2ab+Math.PI/2)
);
this.s2 = new point(
this.s.x+(this.rbc/2)*Math.cos(this.a2bc+Math.PI/2),
this.s.y+(this.rbc/2)*Math.sin(this.a2bc+Math.PI/2)
);
this.s3 = new point(
this.s.x+(this.rca/2)*Math.cos(this.a2ca+5*Math.PI/2),
this.s.y+(this.rca/2)*Math.sin(this.a2ca+5*Math.PI/2)
);
}
move(m){
this.c = m;
this.scc = curcumicenter(this.a,this.b,this.c);
this.s.update(this.scc.x,this.scc.y);
this.x = dist(this.s,this.a);
this.c1 = dist(this.a,this.b)/2;
this.c2 = dist(this.b,this.c)/2;
this.c3 = dist(this.c,this.a)/2;
this.a2ab = Math.atan2(this.a.y-this.b.y,this.a.x-this.b.x);
this.a2bc = Math.atan2(this.b.y-this.c.y,this.b.x-this.c.x);
this.a2ca = Math.atan2(this.c.y-this.a.y,this.c.x-this.a.x);
this.rab = Math.sqrt(this.x*this.x-this.c1*this.c1);
this.rbc = Math.sqrt(this.x*this.x-this.c2*this.c2);
this.rca = Math.sqrt(this.x*this.x-this.c3*this.c3);
this.s1.update(
this.s.x+(this.rab/2)*Math.cos(this.a2ab+Math.PI/2),
this.s.y+(this.rab/2)*Math.sin(this.a2ab+Math.PI/2)
);
this.s2.update(
this.s.x+(this.rbc/2)*Math.cos(this.a2bc+Math.PI/2),
this.s.y+(this.rbc/2)*Math.sin(this.a2bc+Math.PI/2)
);
this.s3.update(
this.s.x+(this.rca/2)*Math.cos(this.a2ca+5*Math.PI/2),
this.s.y+(this.rca/2)*Math.sin(this.a2ca+5*Math.PI/2)
);
}
iterate(it){
this.it = it;
// this.t1 = new triangle(this.a,this.b,this.s1,this.lw/2);
// this.t2 = new triangle(this.a,this.s2,this.c,this.lw/2);
// this.t3 = new triangle(this.b,this.c,this.s3,this.lw/2);
this.t4 = new triangle(this.a,this.s1,this.s3,this.lw/2);
this.t5 = new triangle(this.b,this.s2,this.s1,this.lw/2);
this.t6 = new triangle(this.c,this.s3,this.s2,this.lw/2);
// this.t7 = new triangle(this.s1,this.s2,this.s3,this.lw/2);
if(it < 3){
// this.t1.iterate(it+1);
// this.t2.iterate(it+1);
// this.t3.iterate(it+1);
this.t4.iterate(it+1);
this.t5.iterate(it+1);
this.t6.iterate(it+1);
// this.t7.iterate(it+1);
}
// this.t1.show();
// this.t2.show();
// this.t3.show();
this.t4.show();
this.t5.show();
this.t6.show();
// this.t7.show();
}
show(){
// c.beginPath();
// c.lineTo(this.a.x,this.a.y);
// c.lineTo(this.b.x,this.b.y);
// c.lineTo(this.c.x,this.c.y);
// c.strokeStyle="white";
// c.lineWidth=this.lw;
// c.lineJoin="round";
// c.closePath();
// c.stroke();
this.a.show("white",2);
this.b.show("white",2);
this.c.show("white",2);
this.s.show("#00FFFF",1);
this.s1.show("#00FFFF",1);
this.s2.show("#00FFFF",1);
this.s3.show("#00FFFF",1);
this.a.cleanup();
this.b.cleanup();
this.c.cleanup();
this.s.cleanup();
this.s1.cleanup();
this.s2.cleanup();
this.s3.cleanup();
}
}
//i,i+1,mouse
let pts = [],
mouse_pt = new point(mouse.x,mouse.y),
tris = [],
num = 20,
r = h/3;
for(let i = 0, len = num; i < len; i++){
pts.push(new point(w/2+r*Math.cos(i*2*Math.PI/len),h/2+r*Math.sin(i*2*Math.PI/len)));
}
let A, B;
for(let i = 0, len = num; i < len; i++){ A = i; B = i+1; if(B >= len){
B = 0;
}
tris.push(new triangle(pts[A],pts[B],mouse_pt));
}
function draw() {
mouse_pt.update(mouse.x,mouse.y);
mouse_pt.show();
// for(let i = 0, len = pts.length; i < len; i++){
// pts[i].show();
// }
for(let i = 0, len = tris.length; i < len; i++){
tris[i].move(mouse_pt);
tris[i].iterate(0);
tris[i].show();
}
}
ctx.addEventListener(
"mousemove",
function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
},
false
);
function fitCanvas() {
w = ctx.width = window.innerWidth;
h = ctx.height = window.innerHeight;
}
function loop() {
fitCanvas();
draw();
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);
};
一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti
标签： canvas
上面是“利用canvas画几个好玩的星云物种”的全面内容，想了解更多关于 好玩 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_2458.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
