老师,哪里不对?

老师,哪里不对?

<!DOCTYPE html>

<html>

<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 ctx=canvas.getContext("2d");

        var img=new Image();

        img.src="http://img1.sycdn.imooc.com/climg//5aa6633400017bc704170220.jpg"

        img.onload=function(){

            ctx.drawImage(img,0,0);

        }

        var offcanvas=document.getElementById("offcanvas");

        var offctx=offcanvas.getContext("2d"); 

        offctx.fillStyle="rgba(255,255,255,0.5)";

        offset.textAlign="center";

        offset.font="bold 30px 微软雅黑";

        offctx.fillText('==www.imooc.com=',100,660);

        ctx.drawImage(offcanvas,0,0,offcanvas.width,offcanvas.height,0,0,canvas.width,canvas.height);

    </script>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

是的,相对于offcanvas左上角(200,200)的位置:

http://img1.sycdn.imooc.com//climg/5c2c2fcb00011a3c08010802.jpg

水平方向按照文字的中间计算。

好帮手慕星星 2019-01-02 10:21:52

同学你好,代码中的问题:

http://img1.sycdn.imooc.com//climg/5c2c20300001f24d14490537.jpg

自己完善测试下,祝学习愉快!

  • 提问者 小章鱼丸 #1
    offctx.fillText('==www.imooc.com=',200,200); 老师,最后这个(200,200)相对的坐标原点是哪里?offcanvas的左上角吗?
    2019-01-02 10:29:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师