用按鈕繪製圖像

嗨，我想用畫布中的按鈕繪製圖像。但我無法畫出清晰的畫布。所以;用按鈕繪製圖像

<!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> 
 
\t 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; 
 
\t 
 
\t 
 
image.src = '/pika.png'; //it is in my pc 
 
\t 
 
image.onload = function(){   // i don't want draw the image on load 
 
\t kontrol=true;} 
 

 
\t 
 
\t b1.onclick=function(){   // i want draw with button 
 
\t \t if(kontrol=true){ 
 
\t \t 
 
    ctx.drawImage(image, 0, 0); 
 
\t \t } 
 
\t } 
 

 
\t </script> 
 
</body> 
 
</html>

當我上載功能，圖像嘗試它是工作，但我想用按鈕

來源

2017-08-05 Muzaffer Kadir Yılmaz

沒問題，我把它畫。謝謝...

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

來源

2017-08-05 21:30:08

如果pika.png位於同一目錄中的HTML文件，然後你的形象的名字之前只是刪除斜槓：image.src = 'pika.png';

來源

2017-08-05 21:33:32

用按鈕繪製圖像

回答

相關問題