在畫布上隨機顯示圖像

我需要幫助，使用Javascript和HTML5編碼。請指教！在畫布上隨機顯示圖像

<HTML> 
<HEAD> 
<SCRIPT language="javascript"> 
    function Add() { 
     if (document.getElementById('amount').value < 100){ 
      document.getElementById('amount').value++; 
      newIMG = document.createElement("IMG"); 
      newIMG.src = 'jef-frog.gif'; 
      newIMG.width = 50; 
      newIMG.height = 50; 
      document.getElementById("imagedest").appendChild(newIMG); 
     } 
    } 

    function Remove() { 
     if(document.getElementById('amount').value > 0) 
      document.getElementById('amount').value--; 
     imagedest.removeChild(imagedest.lastChild); 
    } 

    function numeralsOnly(evt) { 
     evt = (evt) ? evt : event; 
     var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : 
      ((evt.which) ? evt.which : 0)); 
     if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
      return false; 
     } 
     return true; 
    } 
</SCRIPT> 
</HEAD> 

<BODY> 
    <H2>TESTING</H2> 
    PREY 
    <BR/> 
    <img src="jef-frog.gif" alt="frogsonice.com" width="100" height="100"/> 

<BR/> 
<FORM> 
    <INPUT type="button" value="+" onClick="Add()"> 
    <input type="text" id="amount" value=0 maxlength="3" size="1" onkeypress="return numeralsOnly(event)"> 
    <INPUT type="button" value="-" onClick="Remove()"> 

    <div id='imagedest'> 
    </div> 

</FORM> 
</BODY> 
</HTML>

我已經測試的代碼，它將會在<div>標籤顯示，但我想讓它出現在上面創建的畫布。我不知道如何捕捉畫布中的東西。誰能幫忙？

來源

2012-04-27 Luke Lee

您需要使用畫布API來繪製的東西就可以了

得到畫布（VAR帆布=的document.getElementById（「畫布」）;）
獲得2D上下文（VAR CTX = canvas.getContext（「2D」）;）
繪製圖像（https://developer.mozilla.org/en/Canvas_tutorial/Using_images）

實施例具有形狀

<html> 
<head> 
    <script type="application/javascript"> 
    function draw() { 
     var canvas = document.getElementById("canvas"); 
     if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50); 
     } 
    } 
    </script> 
</head> 
<body onload="draw();"> 
    <canvas id="canvas" width="150" height="150"></canvas> 
</body> 
</html>

來源

2012-04-27 10:33:16 Yves

'代碼' 函數刪除（）{ 如果（的document.getElementById（ '量'）值> 0。）的document.getElementById（ '量'）value--。 imagedest.removeChild（imagedest.lastChild）; c5_context.drawImage（bgImage，destX，destY，600，300）; //c5_context.drawImage（frog，x，y，58，100）.value--; } 函數數字只有（evt）{evt =（evt）？ evt：event; var charCode =（evt.charCode）？ evt.charCode：（（evt.keyCode）？evt.keyCode：（（evt.which）？evt.which：0））; （charCode> 31 &&（charCode <48 || charCode> 57））{ 返回false; } return true; } 'code' – 2012-04-28 03:59:33

我想，我不明白你的問題:-( – Yves 2012-04-30 10:40:07

在畫布上隨機顯示圖像

回答

相關問題