用按钮绘制图像

Question

嗨，我试图用画布上的按钮绘制图像。 但是我不能在干净的画布上画画。 所以;

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Başlıksız Belge</title> </head> <body> <input type="button" id="b1" value="ciz"> <canvas id="canvas" height="300" width="600" style="border: solid;background-color: brown; " >Eski Sürüm Tarayıcı . </canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var b1 =document.getElementById("b1"); var image = new Image(60, 45); // using optional size for image var kontrol; image.src = '/pika.png'; //it is in my pc image.onload = function(){ // i don't want draw the image on load kontrol=true;} b1.onclick=function(){ // i want draw with button if(kontrol=true){ ctx.drawImage(image, 0, 0); } } </script> </body> </html> 

当我尝试加载图像功能时，但我想用按钮绘制

Answer 1

没问题，我明白了。 谢谢...

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var b1 =document.getElementById("b1"); var image = new Image(60, 45); b1.onclick=function(){ image.src = 'https://i.hizliresim.com/nWdGrR.png'; image.onload = function(){ ctx.drawImage(image, 0, 0); } } 

Answer 2

如果pika.png与您的html文件位于同一目录中，则只需在图像名称之前删除正斜杠即可： image.src = 'pika.png';