帮我看看做得怎样

来源：9-2 编程练习

慕神1112983

2019-11-01 14:53:13

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas离屏</title>
    <style>
    #offCanvas{
        display:none;
    }
    </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 img = new Image();
        img.src = "http://climg.mukewang.com/5aa6633400017bc704170220.jpg";

        var offCanvas=document.getElementById("offCanvas");
        var offContext=offCanvas.getContext("2d");

        var str = "==www.imooc.com=";
        offContext.font = "bold 28px sans-serif";
        offContext.textAlign = "center";
        offContext.fillStyle = "rgba(255,255,255,.5)";
        offContext.fillText(str,200,200);
        
        img.onload = function(){
            context.drawImage(img,0,0);
            context.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);            
        } 
        
    </script>
</body>
</html>

写回答

2回答