让div悬浮于canvas之上 使用z-index控制层及顺序
慕课网canvas demo
<div id="canvas-wrapper">
<canvas id="canvas">
你的浏览器不支持canvas，请更换浏览器再试！
</canvas>
<div id="controller">
<p>在canvas中使用html元素 </p>
<a href="#" class="lime color-btn" id="canvas-btn">停止运动</a>
<a href="#" class="white color-btn" id="white-color-btn">白色</a>
<a href="#" class="black color-btn" id="black-color-btn">黑色</a>
<a href="#" class="pink color-btn" id="pink-color-btn">粉色</a>
</div>
</div>
<style> *{
height: 100%;
padding: 0;
margin: 0;
}
html{
font-size:20px;
}
@media screen and (max-width: 1920px){
html{
font-size:20px;
}
}
@media screen and (max-width: 1366px){
html{
font-size:17.75px;
}
}
#canvas-wrapper{
width: 100%;
height: 100%;
position: relative;
margin: 0px auto;
}
#canvas{
/*border: 1px solid #aaa;*/
}
#controller{
position: absolute;
height: 20%;
top:30px;
left:30px;
background: rgba(0, 85 , 116 , 0.5);
padding: 5px 20px 50px 20px;
border-radius: 10px 10px;
}
#controller p{
color: white;
font-weight: bold;
}
#controller a{ text-decoration: none;
border-radius: 4px;
display: inline-block;
}
#canvas-btn{ }
.color-btn{
color: #fff;
line-height: 20px;
height: 20px;
margin-left: 10px;
padding: 10px;
}
.white{
background: #fff;color:#000;
}
.black{
background: #000;
}
.lime{
background: #b3dc23;
}
.pink{
background: pink;
}
.red{
background: red;
} </style>
<script>
var balls=[];//小球数组
var isMoving = true;//是否在运动
var bgColor = "white";//初始背景颜色
window.onload = function(){
var c=document.getElementById("canvas");
c.width = document.body.clientWidth;
c.height = document.body.clientHeight;
/*c.width = 800 ;
c.height = 800;*/
var cxt = c.getContext("2d");
//cxt.globalAlpha=0.7;//全局透明度为70%
//cxt.globalCompositeOperation = "xor";//使用异或操作对源图像与目标图像进行组合。
for (var i= 0 ;i<50 ; i++){//绘制100个小球
var R = Math.floor(Math.random() * 255) ;
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
var radius = Math.random() * 50 + 20;
//绘制一个小球
aBall = {
color:"rgb("+ R +" , "+ G +" , "+ B +")",//随机颜色
radius:radius,
x:Math.random() * (c.width - 2 * radius) +radius,//X轴坐标
y:Math.random() * (c.height - 2 * radius) + radius,//Y轴坐标
//碰撞检测
vx:(Math.random() * 5 + 5) *Math.pow(-1 , Math.floor(Math.random() * 100)),
vy:(Math.random() * 5 + 5) *Math.pow(-1 , Math.floor(Math.random() * 100))
}
balls[i] = aBall;//将小球添加到数组
}
//小球运动速度
setInterval(
function(){
draw(cxt); if(isMoving){
update(c.width , c.height);
}
},
30
)
} document.getElementById("canvas-btn").onclick=function(event){
if(isMoving){
isMoving = false ;
this.text = "开始运动";
}else{
isMoving = true ;
this.text = "停止运动";
}
return false;
}
//改变背景颜色
document.getElementById("white-color-btn").onclick = function(event){
bgColor = "white";
return false;
}
document.getElementById("black-color-btn").onclick = function(event){
bgColor = "black";
return false;
}
document.getElementById("pink-color-btn").onclick = function(event){
bgColor = "pink";
return false;
}
//绘制canvas
function draw(cxt){
var c = cxt.canvas ;
cxt.clearRect(0 , 0 , c.width , c.height);
if(bgColor == "black"){
cxt.fillStyle = "black";
cxt.fillRect(0 , 0 , c.width , c.height);
}else if(bgColor == "pink"){
cxt.fillStyle = "pink";
cxt.fillRect(0 , 0 , c.width , c.height);
}
for(var i=0 ; i<balls.length ; i++){
cxt.fillStyle = balls[i].color;
cxt.beginPath();
//中心点x , 中心点y , 半径 , 开始角度 ， 结束角
cxt.arc(balls[i].x , balls[i].y , balls[i].radius , 0 , Math.PI*2);
cxt.closePath();
cxt.fill();
}
}
//小球运动 更新小球位置
function update(canvasWidth , canvasHeight){
for( var i=0 ; i<balls.length ; i++){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
if(balls[i].x - balls[i].radius <= 0){
balls[i].vx = -balls[i].vx ;
balls[i].x = balls[i].radius ;
}
if(balls[i].x + balls[i].radius >= canvasWidth){
balls[i].vx = -balls[i].vx ;
balls[i].x =canvasWidth - balls[i].radius ;
}
if(balls[i].y - balls[i].radius <= 0){
balls[i].vy = -balls[i].vy ;
balls[i].y = balls[i].radius ;
}
if(balls[i].y + balls[i].radius >= canvasHeight){
balls[i].vy = -balls[i].vy ;
balls[i].y = canvasHeight - balls[i].radius ;
}
}
}
</script>
