使用按钮绘制图像答案

【问题标题】：Draw image with button使用按钮绘制图像
【发布时间】：2017-08-05 21:20:33
【问题描述】：

您好，我正在尝试使用画布中的按钮绘制图像。但我不能在清晰的画布上画画。所以;

<!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>

当我尝试使用图像加载功能时，它正在工作，但我想用按钮绘制

【问题讨论】：

标签： javascript html button canvas drawimage

【解决方案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);
	}
			}

【讨论】：

【解决方案2】：

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

【讨论】：