m0_63002604 2022-06-06 23:06 采纳率: 75%
浏览 30
已结题

用javascript和html绘制文本,但没有任何显示

问题遇到的现象和发生背景

尝试用javascript和html绘制文本,但没有任何显示

问题相关代码,请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>绘制文本</title>
  <script>
    window.onload=function(){
        var oCanvas=document.getElementById("myCanves");
        var oContext=oCanvas.getContext("2d");
        oContext.fillStyle="#0000FF";
        oContext.fillRect(0,0,500,230);
        oContext.fillStyle="#FFF";
        oContext.strokeStyle="#FFF";
        oContext.font="bold 60px '微软雅黑'";
        oContext.textBaseline="top";
        oContext.textAlign="start";
        oContext.strokeText("天天私房烘焙", 40, 10);
        oContext.font="bold 40px '微软雅黑'";
        oContext.fillText("坚持纯手工制作理念", 40, 80);
        }
    </script>
 </head>
 <body>
  <canvas id="myCanvas" width="500px" height="230px"></canvas>
 </body>
</html>


运行结果及报错内容

img

我的解答思路和尝试过的方法

用Edge查看错误如上图所示。初学者,不太明白是错哪里了

我想要达到的结果

请问如何修改才能显示绘制文本

  • 写回答

1条回答 默认 最新

  • 王鹏飞的解忧屋 2022-06-06 23:13
    关注

    把你的script标签里的整个内容放到body标签后面执行一下试试

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 6月14日
  • 已采纳回答 6月6日
  • 创建了问题 6月6日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度