当前位置： 首页 > article >正文

Canvas百战成神-圆(1)

article 2025/2/28 16:50:43

Canvas百战成神-圆

初始化容器

<canvas id="canvas"></canvas>

canvas{
    border: 1px solid black;
}

让页面占满屏幕

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
::-webkit-scrollbar{
    display: none;
}

初始化画笔

let canvas=document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let c=canvas.getContext('2d');

以(x,y)为圆心，r为半径画一个圆

请添加图片描述

var x=20;
var y=20;
var r=20;
c.beginPath()
c.arc(x,y,r,Math.PI*2,false);
c.strokeStyle='blue';
c.stroke();

创建一个动画帧

请添加图片描述

function animate(){
    requestAnimationFrame(animate);
    console.log(1)
}
animate()

让圆以速度vx直线运动

请添加图片描述

var x=20;
var y=20;
var r=10;
var vx=1;
var width=canvas.width
var height=canvas.height

function animate(){
    requestAnimationFrame(animate);

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

    c.beginPath()
    c.arc(x,y,r,Math.PI*2,false);
    c.strokeStyle='blue';
    c.stroke();

    x+=vx
}
animate()

当圆碰到边界时反弹

请添加图片描述

var x=30;
var y=30;
var r=20;
var vx=4;
var width=canvas.width
var height=canvas.height

function animate(){
    requestAnimationFrame(animate);

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

    c.beginPath()
    c.arc(x,y,r,Math.PI*2,false);
    c.strokeStyle='blue';
    c.stroke();
//到达边界时速度变为相反数
    if(x-r<0 || x+r>width){
        vx=-1*vx
    }

    x+=vx
}
animate()

给圆加上一个y轴的速度

请添加图片描述

//添加一个y轴的速度
var x=30;
var y=30;
var r=20;
var vx=4;
var vy=3;
var width=canvas.width
var height=canvas.height

function animate(){
    requestAnimationFrame(animate);

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

    c.beginPath()
    c.arc(x,y,r,Math.PI*2,false);
    c.strokeStyle='blue';
    c.stroke();

    if(x-r<0 || x+r>width){
        vx=-1*vx
    }
    if(y-r<0 || y+r>height){
        vy=-1*vy
    }

    x+=vx
    y+=vy
}
animate()

令圆的大小,生成点,速度随机

请添加图片描述

//加上随机数
var r=(Math.random()+0.5)*10+10;
var width=canvas.width
var height=canvas.height
var x=Math.random()*(width-2*r)+r;
var y=Math.random()*(height-2*r)+r
var vx=(Math.random()-0.5)*8;
var vy=(Math.random()-0.5)*8;

function animate(){
    requestAnimationFrame(animate);

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

    c.beginPath()
    c.arc(x,y,r,Math.PI*2,false);
    c.strokeStyle='blue';
    c.stroke();

    if(x-r<0 || x+r>width){
        vx=-1*vx
    }
    if(y-r<0 || y+r>height){
        vy=-1*vy
    }

    x+=vx
    y+=vy
}
animate()

函数化，批量化生成圆

请添加图片描述

function Circle(x,y,vx,vy,r){
    this.x=x;
    this.y=y;
    this.vx=vx;
    this.vy=vy;
    this.r=r;

    this.draw=function(){
        c.beginPath()
        c.arc(this.x,this.y,this.r,Math.PI*2,false);
        c.strokeStyle='blue';
        c.stroke();
    }

    this.update=function(){
        if(this.x-this.r<0 || this.x+this.r>width){
            this.vx=-1*this.vx
        }
        if(this.y-this.r<0 || this.y+this.r>height){
            this.vy=-1*this.vy
        }
        this.x+=this.vx
        this.y+=this.vy
        this.draw()
    }
}

var width=canvas.width
var height=canvas.height
var circleArray=[]
for (var i=0;i<10;i++){
    var r=(Math.random()+0.5)*10+10;
    var x=Math.random()*(width-2*r)+r;
    var y=Math.random()*(height-2*r)+r
    var vx=(Math.random()-0.5)*8;
    var vy=(Math.random()-0.5)*8;

    circleArray.push(new Circle(x,y,vx,vy,r))
}
var circle = new Circle(20,50,5,5,30)
function animate(){
    requestAnimationFrame(animate);

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

    for (var i=0;i<circleArray.length;i++){
        circleArray[i].update()
    }
}
animate()

实心圆

请添加图片描述

//在Circle的draw()方法后写上c.fill()方法
this.draw=function(){
    c.beginPath()
    c.arc(this.x,this.y,this.r,Math.PI*2,false);
    c.strokeStyle='blue';
    c.stroke();
    c.fillStyle=colorArray[Math.floor(Math.random()*colorArray.length)]
    c.fill()
}

靠近鼠标的圆变大,远离再变小

请添加图片描述

var maxRadius=40
var minRadius=4

var mouse={
    x:undefined,
    y:undefined
}

window.addEventListener("mousemove", function(event){
    mouse.x = event.x
    mouse.y = event.y
})

//在update方法里加上判断
if(mouse.x-this.x<50 && mouse.x-this.x>-50 && mouse.y-this.y<50 && mouse.y-this.y>-50){
    if(this.r<maxRadius){
        this.r+=1
    }
}else if(this.r>minRadius){
    this.r-=1
}

给圆加上随机颜色

请添加图片描述

var colorArray=[
    'red',
    'blue',
    'pink',
    'orange',
    'purple',
    'green',
    'yellow',
]

//在draw方法里加上颜色
c.fillStyle=colorArray[Math.floor(Math.random()*colorArray.length)]

将随机的颜色变为圆固定的属性

请添加图片描述

this.color=colorArray[Math.floor(Math.random()*colorArray.length)]

//draw方法里填充自己的颜色
c.fillStyle=this.color

为每个圆设置最大最小半径

请添加图片描述

//完整代码如下
var canvas = document.getElementById('canvas');
let c=canvas.getContext('2d');
var width=canvas.width = window.innerWidth;
var height=canvas.height = window.innerHeight;

var mouse={
    x:undefined,
    y:undefined
}
var colorArray=[
    'red',
    'blue',
    'pink',
    'orange',
    'purple',
    'green',
    'yellow',
]
var circleArray=[]

window.addEventListener("mousemove", function(event){
    mouse.x = event.x
    mouse.y = event.y
})

function Circle(x,y,vx,vy,r,maxRadius,minRadius){
    this.x=x;
    this.y=y;
    this.vx=vx;
    this.vy=vy;
    this.r=r;

    this.maxRadius=maxRadius
    this.minRadius=minRadius

    this.color=colorArray[Math.floor(Math.random()*colorArray.length)]

    this.draw=function(){
        c.beginPath()
        c.arc(this.x,this.y,this.r,Math.PI*2,false);
        c.strokeStyle='blue';
        c.stroke();
        c.fillStyle=this.color
        c.fill()
    }

    this.update=function(){
        if(this.x-this.r<0 || this.x+this.r>width){
            this.vx=-1*this.vx
        }
        if(this.y-this.r<0 || this.y+this.r>height){
            this.vy=-1*this.vy
        }
        this.x+=this.vx
        this.y+=this.vy

        if(mouse.x-this.x<50 && mouse.x-this.x>-50 && mouse.y-this.y<50 && mouse.y-this.y>-50){
            if(this.r<this.maxRadius){
                this.r+=1
            }
        }else if(this.r>this.minRadius){
            this.r-=1
        }

        this.draw()
    }
}

for (var i=0;i<200;i++){
    var r=(Math.random()+0.5)*10+30;
    var maxRadius=(Math.random()+0.5)*10+20;
    var minRadius=(Math.random()+0.5)*4+1;
    var x=Math.random()*(width-2*r)+r;
    var y=Math.random()*(height-2*r)+r
    var vx=(Math.random()-0.5)*2;
    var vy=(Math.random()-0.5)*2;

    circleArray.push(new Circle(x,y,vx,vy,r,maxRadius,minRadius))
}
function animate(){
    requestAnimationFrame(animate);

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

    for (var i=0;i<circleArray.length;i++){
        circleArray[i].update()
    }
}
animate()

增多数量

请添加图片描述

for (var i=0;i<800;i++){
}

窗口大小改变时刷新

var canvas = document.getElementById('canvas');
let c=canvas.getContext('2d');
var width=canvas.width = window.innerWidth;
var height=canvas.height = window.innerHeight;

var mouse={
    x:undefined,
    y:undefined
}
var colorArray=[
    'red',
    'blue',
    'pink',
    'orange',
    'purple',
    'green',
    'yellow',
]
var circleArray=[]

window.addEventListener("mousemove", function(event){
    mouse.x = event.x
    mouse.y = event.y
})
window.addEventListener("resize", function(event){
    width=canvas.width = window.innerWidth;
    height=canvas.height = window.innerHeight;

    init();
})
function Circle(x,y,vx,vy,r,maxRadius,minRadius){
    this.x=x;
    this.y=y;
    this.vx=vx;
    this.vy=vy;
    this.r=r;

    this.maxRadius=maxRadius
    this.minRadius=minRadius

    this.color=colorArray[Math.floor(Math.random()*colorArray.length)]

    this.draw=function(){
        c.beginPath()
        c.arc(this.x,this.y,this.r,Math.PI*2,false);
        c.strokeStyle='blue';
        c.stroke();
        c.fillStyle=this.color
        c.fill()
    }

    this.update=function(){
        if(this.x-this.r<0 || this.x+this.r>width){
            this.vx=-1*this.vx
        }
        if(this.y-this.r<0 || this.y+this.r>height){
            this.vy=-1*this.vy
        }
        this.x+=this.vx
        this.y+=this.vy

        if(mouse.x-this.x<50 && mouse.x-this.x>-50 && mouse.y-this.y<50 && mouse.y-this.y>-50){
            if(this.r<this.maxRadius){
                this.r+=1
            }
        }else if(this.r>this.minRadius){
            this.r-=1
        }

        this.draw()
    }
}


function init(){
    circleArray=[]
    for (var i=0;i<800;i++){
        var r=(Math.random()+0.5)*10+30;
        var maxRadius=(Math.random()+0.5)*10+20;
        var minRadius=(Math.random()+0.5)*4+1;
        var x=Math.random()*(width-2*r)+r;
        var y=Math.random()*(height-2*r)+r
        var vx=(Math.random()-0.5)*2;
        var vy=(Math.random()-0.5)*2;

        circleArray.push(new Circle(x,y,vx,vy,r,maxRadius,minRadius))
    }
}
function animate(){
    requestAnimationFrame(animate);

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

    for (var i=0;i<circleArray.length;i++){
        circleArray[i].update()
    }
}
init()
animate()

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        ::-webkit-scrollbar{
            display: none;
        }
        #canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    

var canvas = document.getElementById('canvas');
let c=canvas.getContext('2d');
var width=canvas.width = window.innerWidth;
var height=canvas.height = window.innerHeight;

var mouse={
    x:undefined,
    y:undefined
}
var colorArray=[
    'red',
    'blue',
    'pink',
    'orange',
    'purple',
    'green',
    'yellow',
]
var circleArray=[]

window.addEventListener("mousemove", function(event){
    mouse.x = event.x
    mouse.y = event.y
})
window.addEventListener("resize", function(event){
    width=canvas.width = window.innerWidth;
    height=canvas.height = window.innerHeight;

    init();
})
function Circle(x,y,dx,dy,r,maxRadius,minRadius){
    this.x=x;
    this.y=y;
    this.dx=dx;
    this.dy=dy;
    this.r=r;

    this.maxRadius=maxRadius
    this.minRadius=minRadius

    this.color=colorArray[Math.floor(Math.random()*colorArray.length)]

    this.draw=function(){
        c.beginPath()
        c.arc(this.x,this.y,this.r,Math.PI*2,false);
        c.strokeStyle='blue';
        c.stroke();
        c.fillStyle=this.color
        c.fill()
    }

    this.update=function(){
        if(this.x-this.r<0 || this.x+this.r>width){
            this.dx=-1*this.dx
        }
        if(this.y-this.r<0 || this.y+this.r>height){
            this.dy=-1*this.dy
        }
        this.x+=this.dx
        this.y+=this.dy

        if(mouse.x-this.x<50 && mouse.x-this.x>-50 && mouse.y-this.y<50 && mouse.y-this.y>-50){
            if(this.r<this.maxRadius){
                this.r+=1
            }
        }else if(this.r>this.minRadius){
            this.r-=1
        }

        this.draw()
    }
}


function init(){
    for (var i=0;i<800;i++){
        var r=(Math.random()+0.5)*10+30;
        var maxRadius=(Math.random()+0.5)*10+20;
        var minRadius=(Math.random()+0.5)*4+1;
        var x=Math.random()*(width-2*r)+r;
        var y=Math.random()*(height-2*r)+r
        var dx=(Math.random()-0.5)*2;
        var dy=(Math.random()-0.5)*2;
    
        circleArray.push(new Circle(x,y,dx,dy,r,maxRadius,minRadius))
    }
}
function animate(){
    requestAnimationFrame(animate);

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

    for (var i=0;i<circleArray.length;i++){
        circleArray[i].update()
    }
}
init()
animate()

</script>
</html>

http://www.kler.cn/a/1390.html

相关文章：

  • 一天吃透TCP面试八股文
  • Activity工作流(三)：Service服务
  • 尺取法
  • SpringCloud笔记(Hoxton)——Netflix之Ribbon负载均衡
  • 知识点16--k8s资源清单定义入门
  • 好久没写过Qt了，写个Qt回味一下信号与槽
  • 海思SD3403/SS928V100开发（7）mcp2515-SPI转CAN驱动开发
  • Linux用户和权限 —— 操作演示
  • 【5G RRC】NR测量事件介绍
  • 关于字符类型
  • 基于 gma 绘制古代洛阳 5 大都城遗址空间分布地图
  • 使用vite创建vue3工程
  • 【SpringBoot项目实战】瑞吉外卖优化篇
  • 美团笔试-3.18
  • 微前端-qiankun
  • 分布式微服务架构下网络通信的底层实现原理
  • GPT-4最震撼我的一点
  • Python截图自动化工具
  • MySQL高级面试题整理
  • 面试造火箭？GitHub顶级“java 复习宝典“一一攻克！star破数十万