菜鸟问下,在同一个html页面里把canvas画的图做为背景,怎样实现?(下面的可以实现,不过动态的好像不行)

落木潇潇流 发布于 2017/07/29 10:55
阅读 710
收藏 0

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
    *{
        padding:0;
        margin:0;
    }

    div div{
        width:500px;
        height:500px;
        outline:1px solid blue;
        background-repeat:no-repeat;
    }
    </style>
</head>
<body>
    <div>
        <canvas id="can" style="display:none;" width="300px" height="250px" style="border:1px solid red">
        </canvas>
        <div id="crop">
            试试看
        </div>

    </div>
    <script type="text/javascript">
        var can = document.getElementById("can"),cxt;
        var crop = document.getElementById("crop");
        console.log(can);
        var cxt = can.getContext("2d");
        cxt.fillStyle = "yellow";
        cxt.moveTo(300,0);
        cxt.lineTo(150,125);
        cxt.lineTo(300,250);
        cxt.stroke();
        cxt.fill();

        crop.style.backgroundImage = "url('"+can.toDataURL()+"')";
                                    
    </script>
</body>
</html>

加载中
1
tcxu
tcxu

用 z-index 将网页定义在上层, 如:

#crop {

z-index:2;

....

将用canvas画的动画背景定义在下面一层, 如: #can {

z-index:1;

.....

落木潇潇流
好的 我试试,谢谢大大
0
tcxu
tcxu

将你的代码修改后,就能显示用canvas画的动画背景(变色)。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
    div div{
        width:500px;
        height:500px;
        outline:1px solid blue;
        background-repeat:no-repeat;
    }
    #can{
        z-index:1;
    }
    #crop {
        z-index:2;
        font-family:"华文彩云";
        font-size:80px;
    }
    </style>
    <script type="text/javascript">
    var c = ["#F00","#0F0","#00F","#0FF","#F0F","#FF0","#AAA"];
    var index=-1;
    function back() {
        var can = document.getElementById("can"),cxt;
        var crop = document.getElementById("crop");
        console.log(can);
        var cxt = can.getContext("2d");
        cxt.fillStyle = c[++index%c.length];
        cxt.moveTo(150,0);
        cxt.lineTo(0,125);
        cxt.lineTo(150,250);
        cxt.stroke();
        cxt.fill();
      crop.style.backgroundImage = "url('"+can.toDataURL()+"')";
    }
    function preparation(){
        setInterval('back()', 1000);
    }
                                    
    </script>
</head>
<body onLoad="preparation()">
    <div>
        <canvas id="can" style="display:none;" width="300px" height="250px" style="border:1px solid red">
        </canvas>
        <div id="crop">
            试试看
        </div>

    </div>
    
</body>
</html>

 

tcxu
tcxu
回复 @CAI233 : 补充说明: 以 表达式 ‘a + b’ 为例, + 是二元操作符, 两边的变量(数值)a 和 b 是它的操作数, 操作是求 a与b之和。 以表达式 ‘++n’ 为例,++是一元操作符,其右边的n为它的操作数,操作是 变量 n 自增1。
tcxu
tcxu
回复 @CAI233 : 按规定,从左至右 计算这个表达式:一元操作符 ++ 与它的操作数 index 的运算结果是 index 自增1;余下的任务是计算 二元操作符 求余 % 与它两边的的操作数: index 的自增结果 和 index数组c的长度,求余数。这个表达式的实际效果是,将数组 c 尾首相接,循环使用数组 c 的元素。
落木潇潇流
您好,请问下 ++index%c.length 这怎么理解? ++index 我知道,不过后面的%c.length是否是限制了index的值的区域?
落木潇潇流
谢谢大大 这样做是可以了
0
tcxu
落木潇潇流
谢谢大大,之前的++index% 我清楚了 后面的作为背景我也弄出来了,感谢大大
返回顶部
顶部