网站单个页面做301,书画网站的建设目标,织梦做手机网站,惠阳区建设局网站这里展示白色半透明气泡如下图#xff1a;实际是动态 思路#xff1a;HTML里只需要一个CANVAS元素#xff0c;Javascript里操作canvas
1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形#xff0c;x坐标屏幕水平随机#xff0c;y所标竖直大于屏幕高度。 圆形背景…这里展示白色半透明气泡如下图实际是动态 思路HTML里只需要一个CANVAS元素Javascript里操作canvas
1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形x坐标屏幕水平随机y所标竖直大于屏幕高度。 圆形背景色可以是随机。那就是各种色彩了 利用计时器控制y-- !doctype html
html langen
head
meta charsetUTF-8
meta nameGenerator contentEditPlus®
meta nameAuthor content
meta nameKeywords content
meta nameDescription content
title5多个小球往上运动/title
style
/style
/head
body
div idd1
canvas idcanvas/canvas
/div
/body
/html script
var canvasdocument.getElementById(canvas);
var contextcanvas.getContext(2d);
canvas.widthwindow.innerWidth;
canvas.heightwindow.innerHeight;
function Circle(){
this.xMath.random()*canvas.width;
this.ycanvas.height;
this.rMath.random()*10;
//绘制圆形
this.paintfunction(){
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI*2);
context.fillStylewhite;
context.globalAlpha 0.5;
context.fill();
}
//控制圆形移动
this.stepfunction(){
this.y--;
}
}
var circles[];
function createCircles(){
var circlenew Circle();//??????
circles[circles.length]circle;
}
function paintCircles(){
for(var i0;icircles.length;i ){
circles[i].paint();
}
}
function stepCircles(){
for(var i0;icircles.length;i ){
circles[i].step();
}
}
var myimgnew Image();
myimg.srcimages/demo-1.png;
var timer;
setInterval(function(){
context.drawImage(myimg,0,0);
timer ;
if(timer 0){
createCircles();
}
paintCircles();
stepCircles();
},10);
/script
更多专业前端知识请上
【猿2048】www.mk2048.com
