为什么不设置display none 也不显示原来的canvas？

来源：9-2 编程练习

陈立天

2020-08-19 10:57:14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas离屏</title>
    <style>
    </style>
</head>
<body>
    <canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>
    <canvas width="800px" height="800px" id="offCanvas">您的浏览器不支持canvas</canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        
        //补充代码
        var offCanvas=document.getElementById("offCanvas");
        var test=offCanvas.getContext("2d");
        
        var img = new Image();
        img.src='http://climg.mukewang.com/5aa6633400017bc704170220.jpg';

        test.font = '30px 微软雅黑';
        test.fillStyle = 'rgba(255,255,255,.6)'
        test.fillText('==www.imooc.com=',60,190);

        img.onload = function(){
            context.drawImage(img,0,0);
            // context.drawImag()
            context.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);
        }
    </script>
</body>
</html>

写回答

1回答