Canvas百战成神-圆(1)

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.mfbz.cn/a/1244.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JavaEE--Thread 类的基本用法(不看你会后悔的嘿嘿)

JavaEE--Thread 类的基本用法(不看你会后悔的嘿嘿)

Thread类是JVM用来管理线程的一个类,换句话说,每个线程都唯一对应着一个Thread对象. 因此,认识和掌握Thread类弥足重要. 本文将从 线程创建线程中断线程等待线程休眠获取线程实例 等方面来进行具体说明. 1)线程创建 方法1:通过创建Thread类的子类并重写run () 方法 class M…
阅读更多...
UDS 14229 -1 刷写34，36，37服务,标准加Trace讲解，没理由搞不明白

UDS 14229 -1 刷写34，36，37服务,标准加Trace讲解，没理由搞不明白

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…
阅读更多...
Windows环境下实现设计模式——状态模式（JAVA版）

Windows环境下实现设计模式——状态模式（JAVA版）

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天总结一下Windows环境下如何编程实现状态模式&#xff08;设计模式&#xff09;。不知道大家有没有这样的感觉&#xff0c;看了一大堆编程和设计模式的书&#xff0c;却还是很难理解设计模式&#xff0c;无…
阅读更多...
【完整代码】用HTML/CSS制作一个美观的个人简介网页

【完整代码】用HTML/CSS制作一个美观的个人简介网页

【完整代码】用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页——学习周记1HELLO&#xff01;大家好&#xff0c;由于《用HTML/CSS制作一个美观的个人简介网页》这篇笔记有幸被很多伙伴关注&#xff0c;于是特意去找了之前写的完整…
阅读更多...
【高阶数据结构】红黑树

【高阶数据结构】红黑树

文章目录1. 使用场景2. 性质3. 结点定义4. 结点旋转5. 结点插入1. 使用场景 Linux进程调度CFSNginx Timer事件管理Epoll事件块的管理 2. 性质 每一个节点是红色或者黑色根节点一定是黑色每个叶子节点是黑色如果一个节点是红色&#xff0c;那么它的两个儿子节点都是黑色从任意…
阅读更多...
【基础算法】单链表的OJ练习(6) # 复制带随机指针的链表 #

【基础算法】单链表的OJ练习(6) # 复制带随机指针的链表 #

文章目录&#x1f347;前言&#x1f34e;复制带随机指针的链表&#x1f351;写在最后&#x1f347;前言 本章的链表OJ练习&#xff0c;是最后的也是最难的。对于本题&#xff0c;我们不仅要学会解题的思路&#xff0c;还要能够通过这个思路正确的写出代码&#xff0c;也就是思路…
阅读更多...
20230314整理

20230314整理

1.JVM内存区域 程序计数器&#xff1a;字节码解释器通过改变程序计数器来依次读取指令&#xff0c;在多线程的情况下&#xff0c;程序计数器用于记录当前线程执行的位置&#xff0c;从而当线程被切换回来的时候能够知道该线程上次运行到哪儿了。它的生命周期随着线程的创建而创…
阅读更多...
基于Java+SpringBoot+vue的学生成绩管理系统设计和实现【源码+论文+演示视频+包运行成功】

基于Java+SpringBoot+vue的学生成绩管理系统设计和实现【源码+论文+演示视频+包运行成功】

博主介绍&#xff1a;专注于Java技术领域和毕业项目实战 &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案例&#xff08;200套&#xff09; 目录 一、效果演示 二、…
阅读更多...
扯什么 try-catch 性能问题？

扯什么 try-catch 性能问题？

“yes&#xff0c;你看着这鬼代码&#xff0c;竟然在 for 循环里面搞了个 try-catch&#xff0c;不知道try-catch有性能损耗吗&#xff1f;”老陈煞有其事地指着屏幕里的代码&#xff1a; for (int i 0; i < 5000; i) {try {dosth} catch (Exception e) {e.printStackTrace…
阅读更多...
如何测试一个AI系统？

如何测试一个AI系统？

最近AI大火&#xff0c;chatgpt、GPT-4、文心一言不断的在轰炸着我们的生活、工作&#xff0c;很多时候我们都在感叹这智能化来的太快了。对于一个测试工程师&#xff0c;如何开始测试一个AI系统呢&#xff0c;今天我们就一起来聊聊相关的内容。 智能系统对测试工程师提出的新问…
阅读更多...
2023年网络安全比赛--网络安全事件响应中职组（超详细）

2023年网络安全比赛--网络安全事件响应中职组（超详细）

一、竞赛时间 180分钟 共计3小时 二、竞赛阶段 1.找出黑客植入到系统中的二进制木马程序，并将木马程序的名称作为Flag值（若存在多个提交时使用英文逗号隔开，例如bin,sbin,…）提交； 2.找出被黑客修改的系统默认指令，并将被修改的指令里最后一个单词作为Flag值提交； 3.找出…
阅读更多...
React 用一个简单案例体验一遍 React-dom React-router React-redux 全家桶

React 用一个简单案例体验一遍 React-dom React-router React-redux 全家桶

一、准备工作 本文略长&#xff0c;建议耐心读完&#xff0c;每一节的内容与上一节的内容存在关联&#xff0c;最好跟着案例过一遍&#xff0c;加深记忆。 1.1 创建项目 第一步&#xff0c;执行下面的命令来创建一个 React 项目。 npx create-react-app react-example cd rea…
阅读更多...
Springboot集成Swagger

Springboot集成Swagger

一、Swagger简介注意点&#xff01; 在正式发布的时候要关闭swagger&#xff08;出于安全考虑&#xff0c;而且节省内存空间&#xff09;之前开发的时候&#xff0c;前端只用管理静态页面&#xff0c; http请求到后端&#xff0c; 模板引擎JSP&#xff0c;故后端是主力如今是前…
阅读更多...
【宝塔面板部署nodeJs项目】网易云nodeJs部署在云服务器上，保姆级教程，写网易云接口用自己的接口不受制于人

【宝塔面板部署nodeJs项目】网易云nodeJs部署在云服务器上，保姆级教程，写网易云接口用自己的接口不受制于人

看了很多部署的&#xff0c;要么少步骤&#xff0c;要么就是写的太简洁&#xff0c;对新手不友好 文章目录前言一、下载网易云nodejs项目1. git clone下载&#xff0c;两种方式2. 运行项目二、使用步骤1. 先在本地运行2.测试接口三、部署服务器1. 在宝塔面板安装pm2管理器2. 压…
阅读更多...
字符函数和字符串函数【上篇】

字符函数和字符串函数【上篇】

文章目录&#x1f396;️1.函数介绍&#x1f4ec;1.1. strlen&#x1f4ec;1.2. strcpy&#x1f4ec;1.3. strcat&#x1f4ec;1.4. strcmp&#x1f4ec;1.5. strncpy&#x1f4ec;1.6. strncat&#x1f4ec;1.7. strncmp&#x1f396;️1.函数介绍 &#x1f4ec;1.1. strlen …
阅读更多...
入行 5年，跳槽 3次，我终于摸透了软件测试这行（来自过来人的忠告）

入行 5年，跳槽 3次，我终于摸透了软件测试这行（来自过来人的忠告）

目录 前言 第一年 第二年 第三年 第四年 作为过来人的一些忠告 前言 最近几年行业在如火如荼的发展壮大&#xff0c;以及其他传统公司都需要大批量的软件测试人员&#xff0c;但是20年的疫情导致大规模裁员&#xff0c;让人觉得行业寒冬已来&#xff0c;软件测试人员的职…
阅读更多...
【YOLOv8/YOLOv7/YOLOv5/YOLOv4/Faster-rcnn系列算法改进NO.60】损失函数改进为wiou

【YOLOv8/YOLOv7/YOLOv5/YOLOv4/Faster-rcnn系列算法改进NO.60】损失函数改进为wiou

前言作为当前先进的深度学习目标检测算法YOLOv8&#xff0c;已经集合了大量的trick&#xff0c;但是还是有提高和改进的空间&#xff0c;针对具体应用场景下的检测难点&#xff0c;可以不同的改进方法。此后的系列文章&#xff0c;将重点对YOLOv8的如何改进进行详细的介绍&…
阅读更多...
css属性学习

css属性学习

css属性 就是我们选择器里面 { } 中的内容 字体样式 font-size 控制字体大小&#xff1a;单位px&#xff08;像素&#xff09; 默认字体占16个像素 <p style"font-size:30px;">font-size&#xff1a;字体大小&#xff0c;单位的话可以用px表示占的像素个数&…
阅读更多...
Mini-Xml 经典实例Demo

Mini-Xml 经典实例Demo

欢迎小伙伴的点评✨✨&#xff0c;相互学习、博主将自己研发xml微型服务器的经验与之分享&#x1f30f;&#x1f30f;&#x1f642; 文章目录前言一、使用mxml库编写Xml文件1.1 经典实例Demo_11.2、经典实例Demo_21.3、经典实例Demo_3二、总结前言 本章将会给大家带来mini-xml…
阅读更多...
在我的MacBook上捣鼓ESP8266

在我的MacBook上捣鼓ESP8266

周三是我们的篮球日&#xff0c;打篮球后总是会有些兴奋&#xff0c;然后就容易睡不着&#xff0c;额&#xff0c;睡不着就拿我的ESP8266开发板出来捣鼓一下。先下载编译工具链https://github.com/espressif/ESP8266_RTOS_SDK下载sdkgit clone https://github.com/espressif/ES…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站