javascript - 将文本放在图像上,文本和图像不显示

标签 javascript

我正在尝试进行预览结帐,您可以在其中预览项目,并在图像上使用自定义文本,但我什至无法显示图像或文本。这是我到目前为止的代码...

<html>
    <head>
       <script>
           window.onload = function(){
               var canvas = document.getElementById("myCanvas");
               var context = canvas.getContext("2d");
               var imageObj = new Image();
               imageObj.onload = function(){
                   context.drawImage(imageObj, 10, 10);
                   context.font = "12pt Arial";
                   context.fillText("My TEXT!", 20, 20);
               };
           imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png"; 
           };
       </script>
    </head>
    <body>
        <div id="myCanvas"></div>
    </body>
</html>

最佳答案

你必须有canvas标签而不是div并给它高度和宽度

<canvas id="myCanvas"  width="578" height="400"></canvas>

关于javascript - 将文本放在图像上,文本和图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20080346/

相关文章:

javascript - Java - Rest 端点返回图像(如果可用)和 JSON(如果不可用)

javascript - 如何测试 Mocha 中的替换方法?

javascript - Jquery 或 JavaScript 在 html 表中添加计算列

javascript - Youtube 缓冲完成事件是否可能

javascript - 在 react 组件中检查 Prop 类型

javascript - Highcharts 最大值 19 向上舍入为 20

javascript - 如何从变量中获取 JSON 值

javascript - 如何使用javascript调用路由并发送数据

javascript - 将新对象添加到传入的 json 字符串

javascript - 为什么 .push() 方法会重复添加到数组中的最后一个元素的值?