麻烦老师检查，谢谢

来源：9-2 编程练习

qq_慕移动3101913

2020-03-03 12:31:33

<!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-->
    <canvas id="offCanvas" width="800px" height="800px">
        您的浏览器不支持canvas
    </canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //图片引入
        var img = new Image();
        img.src = 'http://climg.mukewang.com/5aa6633400017bc704170220.jpg';

        //一定要在图像加载完成后的回调中绘制图像
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            //将第二个canvas中的文字绘制到第一个canvas中。
            ctx.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);
        }

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

        var str = '==WWW.imooc.com=';
            offCtx.font = 'bold 20px 微软雅黑';
            offCtx.lineWidth = 30;
            offCtx.fillStyle = 'RGBA(255,255,255,.5)';
            offCtx.textAlign='center';
            offCtx.fillText(str, 200, 190);

    </script>
</body>

</html>

写回答

1回答