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日

悬赏问题

  • ¥15 r语言神经网络自变量重要性分析
  • ¥15 基于双目测规则物体尺寸
  • ¥15 wegame打不开英雄联盟
  • ¥15 公司的电脑,win10系统自带远程协助,访问家里个人电脑,提示出现内部错误,各种常规的设置都已经尝试,感觉公司对此功能进行了限制(我们是集团公司)
  • ¥15 救!ENVI5.6深度学习初始化模型报错怎么办?
  • ¥30 eclipse开启服务后,网页无法打开
  • ¥30 雷达辐射源信号参考模型
  • ¥15 html+css+js如何实现这样子的效果?
  • ¥15 STM32单片机自主设计
  • ¥15 如何在node.js中或者java中给wav格式的音频编码成sil格式呢