在canvas中使用html元素

让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- 1920px){
            html{
                font-size:20px;
            }
        }
        @media screen and (max- 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>