9-2 离屏canvas的效果是这样吗？

来源：9-2 编程练习

RogerLeung

2018-07-10 14:39:50

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas离屏</title>
    <style>
    #canvas{
     background-color: lightblue;
    }
    #offCanvas{
     background-color: lightgreen;
     display: none; //隐藏
    }
    </style>
</head>
<body>
    <canvas width="417px" height="220px" id="canvas">您的浏览器不支持canvas</canvas>
    <canvas width="417px" height="220px" id="offCanvas">您的浏览器不支持canvas</canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        //补充代码
        var offCanvas = document.getElementById("offCanvas");
        var offctx = offCanvas.getContext("2d");
        ctx.save();
        //绘制离屏
        // offctx.fillRect(0, 0, offCanvas.width, offCanvas.height); 
        offctx.textAlign = "center";
        offctx.textBaseLine  = "top";
        offctx.fillStyle = "white";
        offctx.font ="bold 30px 微软雅黑";
        offctx.fillText("==www.imooc.com==",205,180);
        offctx.fill();
        ctx.restore();

        var img = new Image();
        img.src = "http://climg.mukewang.com/5aa6633400017bc704170220.jpg";
        img.onload = function(){
         //绘制图片
         ctx.drawImage(img, 0, 0);
         //将offCanvas复制到canvas上
         ctx.drawImage(offCanvas, 0, 0, offCanvas.width, offCanvas.height, 0, 0,canvas.width, canvas.height );
        }
    </script>
</body>
</html>

写回答

1回答