老师请检查，谢谢

来源：9-2 编程练习

慕丝1342

2020-05-04 18:59:03

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas离屏</title>
    <style>
        #canvasText{display:none;}
    </style>
</head>
<body>
    <canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>
    
    <canvas width="800px" height="800px" id="canvasText">您的浏览器不支持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 canvasText=document.getElementById("canvasText");
        var ctx=canvasText.getContext("2d");
            ctx.font='30px 微软雅黑';  
            ctx.fillStyle='rgba(255,255,255,.6)';
            ctx.fillText('==www.imooc.com=',60,190);

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

写回答

1回答