草庐IT

Canvas百战成神-圆(1)

编程启航 2023-04-17 原文

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>
战成Canvasspanclasstokenjavascript前端html

有关Canvas百战成神-圆(1)的更多相关文章

  1. ruby-on-rails - Facebook Canvas 应用程序不保存 session - 2

    我制作了一个测试facebook应用程序只是为了玩玩，我正在使用session来存储身份验证。我正在使用omniauth。当我从http://fbbtest.heroku.com/登录时然后刷新页面，session仍然保存，它说我已经登录。当我从Canvas上尝试时http://apps.facebook.com/herokutestapp/它让我登录，重定向回来并说我已登录但是当我手动刷新它然后说我没有登录。我必须对rails3中的session做一些特别的事情以便它也可以在FacebookCanvas？这是我目前在我的Controller和View中拥有的内容defindexend

  2. 前端基于DOM或者Canvas实现页面水印 - 2

    🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引

  3. javascript - 如何使用 Reactjs 在新选项卡中将 Canvas 作为图像打开 - 2

    我目前有一个由JsBarcode的react实现生成的Canvas条码，称为react-barcode。目前，我可以右键单击Canvas并在新选项卡中将其作为图像打开。我如何通过单击按钮来实现此功能？我已经检查了这个问题的几个答案，但它们都使用jquery。我正在寻找React或纯js的实现。 最佳答案 使用HTMLCanvasElement#toDataURLTheHTMLCanvasElement.toDataURL()methodreturnsadataURIcontainingarepresentationoftheimag

  4. canvas - 用于 Canvas 的 JS 库 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。你知道一个很好的js库来处理canvas吗？我已经尝试过使用Processing.js，但我想知道是否有一些好的替代品。

  5. 用于 Canvas html5 的 Javascript getImageData - 2

    我把头发扯掉了!我得到了这个工作，认为“我可以不保存这个版本”，然后我..破坏了“构建”。行myImageData=context.getImageData(0,0,canvas.width,canvas.height);似乎打破了这一点，因为警报会在之前起作用，但在它之后不起作用。图像本身正在加载。欢迎任何和所有建议^_^我已经筋疲力尽了，很快就会让RSI不再踢自己。varmyImageData;varimage_var=newImage();image_var.onload=function(){canvas.width=image_var.width;canvas.height=

  6. javascript - 如何将图像粘贴到 Web 应用程序中？有哪些解决方案？ HTML 5 Canvas ？ - 2

    我目前正在构建一个非常简单的网络应用程序，它需要能够在浏览网络时复制图像，然后将其粘贴到我的页面上。我知道这种功能是可行的-因为我在写消息时将图像粘贴到gmail和Tumblr(我相信他们使用TinyMCE作为他们的编辑器)。经过长时间的搜索-我对可用解决方案的解释质量很差感到难过。这是我收集到的:$(document).bind('paste',function(e){console.log(e);})检查事件对象，似乎只有在有文本时才包含数据(无论如何在Chrome中)。我知道IE有一个clipboardData对象，可以让您访问剪贴板内容。我还听说过使用Flash、JavaApp

  7. javascript - 为什么没有定义 html2canvas？ - 2

    如果我调用这个函数，总是得到“html2canvasisnotdefined”。makeScreenshot:function(button){debugger;html2canvas(document.body,{UncaughtReferenceError:html2canvasisnotdefinedonrendered:function(canvas){document.body.appendChild(canvas);}});},但是为什么？我有一类......就像tutorial写了它。有人有解决方案吗？我想我需要在这里包含html2canvas，但我不知道如何。Ext.d

  8. javascript - Canvas 旋转文本工件 - 2

    我使用Processing.js在图像上显示大约45度旋转的文本。问题是旋转后文本变得难以阅读，因为伪影变得可见，字母间距不恒定或字母没有相同的底线。这是一个demo.您可以看到第二个“HelloWorld”具有Ø符号，而不是e和o。此外，在第8个位置，字母间距问题很明显。有办法解决这个问题吗？至少对于45度旋转的文本。这是一个截图。我知道这看起来没什么大不了的，但最终图像必须是完美的，这个错误真的很突出。 最佳答案 我无法给出具体的处理解决方案，但如果您对通用答案没问题，您可以执行以下操作，然后可能将其与处理集成:Chrome的文

  9. javascript - 在 native JavaScript 中获取 Canvas 内鼠标位置的最现代方法 - 2

    这个问题在这里已经有了答案:HowdoIgetthecoordinatesofamouseclickonacanvaselement?[duplicate](22个答案)关闭3年前。首先，我知道这个问题已经被问过很多次了。但是，提供的答案并不一致，使用了多种方法来获取鼠标位置。几个例子:方法一:canvas.onmousemove=function(event){//thisobjectreferstocanvasobjectMouse={x:event.pageX-this.offsetLeft,y:event.pageY-this.offsetTop}}方法二:functionge

  10. javascript - 从 Canvas 保存图像时缺少扩展名 - 2

    我使用此代码在Javascript中保存图像:window.location.href=grid.toDataURL("image/png").replace("image/png","image/octet-stream");代码有效，但保存的文件没有任何扩展名，我必须手动重命名。我的问题是如何将扩展名放在末尾？谢谢。 最佳答案 toDataURL生成数据uri而不是文件名，因此扩展名不适用于这种情况。data-uri只是二进制内容的文本编码版本，某些浏览器可以将其作为文件读取——如果您愿意，也可以是数据流。由于数据流没有任何文件

随机推荐