代码如下: 请问如何设置让输入的内容替换'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>
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); } }
出现了错误: Uncaught TypeError: Cannot set property 'click' of null //32行
@日照明星: click换成onclick
@balahoho: 提示:Uncaught TypeError: Cannot set property 'onclick' of null
@日照明星: 看一下你的代码
前面少了 window.onload = function () {} 所以执行不了。