如何在div中獲取我的canvas元素值？

我想獲得放置在標籤下的myCanvas的上下文當我試圖獲取上下文值我收到一個錯誤，說畫布沒有定義？我該如何解決這個問題？如何在div中獲取我的canvas元素值？

在此先感謝。這裏是我的代碼：

HTML：

<body> 
< div class ="div-left-column" id ="display" onload="make_base()" > 
< img id="scream" src="/home/openstack/harikrishna/html/tower.jpg" alt="The Scream"  width="50" height="50" > 
< img id ="gray" src ="/home/openstack/harikrishna/html/tower-gray.jpg" width = 50 height = 50/ > 
< canvas id="myCanvas" width="800" height="500" style="border:1px solid #d3d3d3;" /> 
< input type ="button" id="clear" name ="clear" value ="clear" /> 
</div> 
</body>

JS：

function GetElementInsideContainer(containerID, childID) { 
     var elm = document.getElementById(childID); 
     var parent = elm ? elm.parentNode : {}; 
     return (parent.id && parent.id === containerID) ? elm : {}; 
    } 
    e = GetElementInsideContainer("display", "myCanvas"); 
var canvas = e.id; 
var ctx = canvas.getContext("2d"); 
var image = document.getElementById("scream"); 
var clicks = 0; 
var lastClick = [0, 0]; 
canvas.addEventListener("dblclick", getPosition, false); 

function make_base(){ 
var img = new Image(); 
var img2 = new Image(); 
img.src = "/home/openstack/harikrishna/html/tower.jpg"; 
img2.src = "/home/openstack/harikrishna/html/tower-gray.jpg"; 
img.onload = function(){ 
    ctx.drawImage(img, 10,10,30,30); 
    ctx.beginPath(); 
    ctx.moveTo(40,40); 
    ctx.lineTo(80,250); 
    ctx.stroke(); 
    ctx.drawImage(img, 80,250,30,30); 
    ctx.beginPath(); 
    ctx.moveTo(110,250); 
    ctx.lineTo(210,20); 
    ctx.stroke(); 
    ctx.drawImage(img,180,20,30,30); 
    } 
img2.onload = function(){ 
    ctx.drawImage(img2,250,200,30,30); 
} 
} 

function getPosition(event) 
{ 
    var x = event.x; 
    var y = event.y; 
    x -= canvas.offsetLeft; 
    y -= canvas.offsetTop; 
    //alert("x:" + x + " y:" + y); 
    ctx.clearRect(250,200,30,30); 
    ctx.drawImage(image,x,y,30,30); 
} 

document.getElementById('clear').addEventListener('click', function() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    }, false);

來源

2013-12-23 BeingNerd

你嘗試哪種瀏覽器？您是否包含HTML 5 Doctype ..？你可以把它做成小提琴嗎？ – Manoj

我使用Google chrome @Manoj，這裏是小提琴http://jsfiddle.net/CKUQ4/3/ – BeingNerd

變化

var canvas = document.getElementById(e.id);

See The Fiddle

來源

2013-12-23 09:49:53 SeeTheC

你提到只有id名稱不是那個DOM元素。

Try the fiddle

代碼：

e = GetElementInsideContainer("display", "myCanvas"); 
    console.log(e.id); //here geeting only id name 
    var canvas = document.getElementById(e.id); 
    console.log(canvas); //here geeting only DOM element 
    var ctx = canvas.getContext("2d");

來源

2013-12-23 10:22:25 Manoj

如何在div中獲取我的canvas元素值？

回答

相關問題