Question

嗨我想用画布中的按钮绘制图像。但我无法画出清晰的画布。所以;

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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);
	}
			}

＆＃13;

Answer 2

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

用按钮绘制图像

2 个答案: