首页新闻找找看学习计划

html 5 canvas 绘画中的 Javascript 问题

0
悬赏园豆:100 [已解决问题] 解决于 2016-10-13 14:15

代码如下: 请问如何设置让输入的内容替换'ok'内容,可以实现文字在图片显示,谢谢。

复制代码
 1 <!DOCTYPE html>                                                                        
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>draw by input text</title>                                                                            
 5 </head>
 6 
 7 <body>
 8 <canvas id="myCanvas" width="1000" height="500" >
 9 Your browser does not support the HTML5 canvas tag.
10 </canvas>
11 
12 <script>                                                                            
13     var img = new Image();   
14     img.src = './img/demo.jpg';    
15     img.onload=function(){
16        //
17        var canvas=document.getElementById("myCanvas");
18        var ctx=canvas.getContext("2d");
19 var btn.onclick=
document.getElementById("text").value; 20 // 21 ctx.drawImage(img,0,0); 22 23 ctx.font="80px microsoft yahei"; 24 ctx.fillStyle = "rgba(252,255,255,0.7)"; 25 // 如何让输入的值替换到下面“ok”这个地方 26 ctx.fillText('ok',100,100); 27 } 28 29 </script> 30 <br> 31 <input type="text" id="text" value="" /> 32 <input type="button" id="btn" value="submit" /> 33 34 </body> 35 </html>
复制代码
日照明星的主页 日照明星 | 初学一级 | 园豆:120
提问于:2016-10-13 10:28
< >
分享
最佳答案
0
    document.getElementById("btn").click = function () {
        var img = new Image();
        img.src = './img/demo.jpg';
        img.onload = function () {
            //
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var btn = document.getElementById("text").value;
            //
            ctx.drawImage(img, 0, 0);

            ctx.font = "80px microsoft yahei";
            ctx.fillStyle = "rgba(252,255,255,0.7)";
            // 如何让输入的值替换到下面“ok”这个地方
            ctx.fillText(document.getElementById("text").value, 100, 100);
    }
    }

 

收获园豆:100
balahoho | 老鸟四级 |园豆:2096 | 2016-10-13 11:55

出现了错误: Uncaught TypeError: Cannot set property 'click' of null      //32行

日照明星 | 园豆:120 (初学一级) | 2016-10-13 12:00

@日照明星: click换成onclick

balahoho | 园豆:2096 (老鸟四级) | 2016-10-13 12:06

@balahoho:  提示:Uncaught TypeError: Cannot set property 'onclick' of null

日照明星 | 园豆:120 (初学一级) | 2016-10-13 13:36

@日照明星: 看一下你的代码

balahoho | 园豆:2096 (老鸟四级) | 2016-10-13 14:02

前面少了  window.onload = function () {}  所以执行不了。  

日照明星 | 园豆:120 (初学一级) | 2016-10-13 14:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册