2012-05-18 21 views
6

की विधि 'getContext' को कॉल नहीं कर सकता मैं इस पर एक नौसिखिया हूं और वास्तव में कोई जावास्क्रिप्ट नहीं किया है, इसलिए मुझे उम्मीद है कि आप मेरी मदद कर सकते हैं। मैंने एक कैनवास बनाया है जो उपयोगकर्ता को रेडियो बटन के साथ एक आकार और रंग चुनने देता है जिसे कैनवास पर खींचा जाता है। मैंने चुने हुए रंग में ढाल जोड़ने के विकल्प के साथ एक चेकबॉक्स भी जोड़ा है। यहां कार्यक्रम है: http://people.dsv.su.se/~caak1743/Canvas/canvas.htmlTypeError: शून्य (अज्ञात फ़ंक्शन)

अब मैं इसे बनाना नहीं चाहता ताकि आकार को कैनवास क्षेत्र के चारों ओर खींचा जा सके और गिरा दिया जा सके। और मैं एक कोड मुझे लगता है कि मेरा कार्यक्रम पर काम करने के बदला जा सकता है मिल गया है, लेकिन मैं मिलती रहती है: लेखन त्रुटि:

 var ctx = canvas.getContext("2d"); 
: विधि 'getContext' लाइन के लिए अशक्त init (अनाम समारोह) की कॉल नहीं कर सकता

और मुझे नहीं पता कि क्या गलत है या मैं इसे कैसे हल कर सकता हूं। मैंने इसी तरह की समस्याओं के साथ समान कार्यक्रमों की तलाश करने की कोशिश की है लेकिन मुझे कुछ भी नहीं मिला है जिसे मैं यहां लागू कर सकता हूं। यहाँ कोड है कि मैं मेरे साथ शामिल करने के लिए कोशिश कर रहा हूँ है:

function init() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
    } 

    function draw() { 
    clear(); 
    ctx.fillStyle = "#FAF7F8"; 
    rectangle(0,0,WIDTH,HEIGHT); 
    ctx.fillStyle = "#444444"; 
    rectangle(); 
    } 

    function myMove(e){ 
    if (dragok){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    } 
    } 

    function myDown(e){ 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
    canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
    e.pageY > y -15 + canvas.offsetTop){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
    } 
    } 

    function myUp(){ 
    dragok = false; 
    canvas.onmousemove = null; 
    } 

    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp; 

उत्तर

17

बस अनुसरण करने के लिए इसे सही:

<script type="text/javascript"> 
window.onLoad=function(){ init();}; 
    function init() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
    } 

    function draw() { 
    clear(); 
    ctx.fillStyle = "#FAF7F8"; 
    rectangle(0,0,WIDTH,HEIGHT); 
    ctx.fillStyle = "#444444"; 
    rectangle(); 
    } 

    function myMove(e) { 
    if (dragok) { 
     x = e.pageX - canvas.offsetLeft; 
     y = e.pageY - canvas.offsetTop; 
    } 
    } 

    function myDown(e) { 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
     e.pageY > y -15 + canvas.offsetTop) { 
     x = e.pageX - canvas.offsetLeft; 
     y = e.pageY - canvas.offsetTop; 
     dragok = true; 
     canvas.onmousemove = myMove; 
    } 
    } 

    function myUp() { 
    dragok = false; 
    canvas.onmousemove = null; 
    } 

    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp; 
</script> 

यह काम करना चाहिए। समस्या कैनवास तत्व को स्क्रिप्ट चलाने के लिए तैयार होने की आवश्यकता है। <head> में <canvas> लोड करने से पहले अनुभाग चलाता है, यह त्रुटि देता है।

+0

हैलो श्री @ मिलर क्या मैं प्रतिक्रिया मूल में कैनवास का उपयोग कर सकता हूं – Lavaraju

3

मुझे दो समाधान मिले। सबसे पहले आपको पृष्ठ पर jquery जोड़ना है और फिर पूरे जेएस कोड को

$(document).ready(function() { Your code here });

एचटीएमएल तैयार होने के बाद कोड चलाने के लिए कोड बनाता है, या केवल सिर और शरीर को स्वैप करने के लिए एचटीएमएल जेएस का उपयोग करने की आवश्यकता नहीं है, जहां एचटीएमएल जेएस (यह जेएस से पहले एचटीएमएल निष्पादित करता है) का उपयोग करने की कोई आवश्यकता नहीं है। इन्हें काम करना चाहिए।

0

सुनिश्चित करें कि आपकी स्क्रिप्ट आपके कैनवास तत्व के बाद है।

1

आपको त्रुटि से छुटकारा पाने के लिए बस उस पर करने की आवश्यकता है। बस स्क्रिप्ट से पहले कैनवास जोड़ें और हमेशा अपनी स्क्रिप्ट को अंत में रखें।

<body> 
<canvas id="ca"></canvas> 

<script type="text/javascript"> 

    var ca = document.getElementById("ca"); 
    var co = ca.getContext("2d"); 

// whatever your code  
</script> 
</body> 
संबंधित मुद्दे