html跳动的小球,canvas绘制跳动的小球

动画反弹

margin:0;

padding:0;

}

canvas1{

box-shadow: 0px 0px 10px red;

position: absolute;

left:50px;

top: 50px;

}

你的浏览器有待升级

//1.获取元素

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

//2.绘制环境

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

function round(x,y,r,color,speedx,speedy) {

this.x = x;

this.y = y;

this.r = r;

this.color = color;

this.speedx = speedx;

this.speedy = speedy;

//绘制

this.draw = function () {

context.beginPath();

context.fillStyle = this.color;

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

context.fill();

}

//动画

this.move = function () {

if(this.x>canvas.width-2*this.rthis.x-this.r<0){

this.speedx *= -1;//条件范围u内运动反弹

}

if(this.y>canvas.height-2*this.rthis.y-this.r<0){

this.speedy *= -1;

}

this.x += this.speedx;

this.y += this.speedy;

}

//许多球的绘制

var arr = [];

for(var i=0;i<333;i++){

var x = rand(30,470);

var y = rand(30,470);

var r = rand(7,22);

var speedx = rand(1,7);

var speedy = rand(2,8);

var color="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";

var rounds = new round(x,y,r,color,speedx,speedy);

arr.push(rounds);

}

//得到了10个不同样式的小球,并将其存放在数组里

function ani() {

context.clearRect(0,0,canvas.width,canvas.height);

//将数组里的小球分别进行绘制在画布中

for(var i=0;i

arr[i].draw();

arr[i].move();

}

window.requestAnimationFrame(ani);//定时器也可以。在这里确保运动更流畅

}

ani();

//随机函数

function rand(min,max) {

return parseInt(Math.random()*(max-min)+min);

}

html跳动的小球,canvas绘制跳动的小球相关推荐

canvas绘制七彩随机小球！
canvas绘制七彩随机小球 1.题目拿到一个案例,需要在画布上实现不同大小颜色位置的七彩小球,并且要运动起来! 2.思路 (1).第一步需要在页面上创建画布元素,创建一个数组用来存放随机小球的个数 ...
matlab跳动的心脏,Matlab绘制跳动的心
相信不少程序猿在情人节,被女票要求用程序语言编写表白程序.我参考网上的资料,用matlab编写了心跳的动画. 下图是网上流传的心形数学表达式: 我觉得最后一个表达式跟传统的心形是最像的,这个表达式是用 ...
CSS3绘制跳动的橙子动画js特效
下载地址 CSS3绘制跳动的橙子动画特效,两个跳动的橙子和切了一半滴着橙汗的橙子. dd:
Canvas 绘制背景小球、与鼠标交互的小球
canvas入门,跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习,完成一个简单的 canvas demo 下面是代码,操作解释都有注释: <!DOCTYPE html> ...
用matlab绘制跳动的心
用matlab绘制跳动的心(自学留存) https://blog.csdn.net/JasonTube/article/details/108206616?utm_medium=distribute. ...
纯JS实现小球在页面跳动/弹弹弹（有注释）
小球在页面跳动实现方法用了transform:translate(x,y); 即在当前位置进行移动,只需动态改变x和y的值就可以实现移动点我查看页面效果(点击小球开始跳动) JS //获取div节 ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
html5绘制随机五角星_HTML5 canvas绘制五角星的方法
这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTM ...
python制作简单动画_Python tkinter Canvas绘制动画
其实前面程序中的高亮显示已经是动画效果了.程序会用红色.黄色交替显示几何图形的边框,这样看上去就是动画效果了.实现其他动画效果也是这个原理,程序只要增加一个定时器,周期性地改变界面上图形项的颜色.大小 ...

html跳动的小球,canvas绘制跳动的小球

html跳动的小球,canvas绘制跳动的小球相关推荐

最新文章

热门文章