TypeError: Không thể gọi phương thức 'getContext' của null (chức năng ẩn danh)

Tôi là người mới bắt đầu ở đây và chưa thực sự thực hiện bất kỳ JavaScript nào trước đây nên tôi hy vọng bạn có thể giúp tôi. Tôi đã tạo một khung cho phép người dùng chọn một hình dạng và một màu với các nút radio sau đó được vẽ lên khung vẽ. Tôi cũng đã thêm một hộp kiểm với tùy chọn thêm gradient vào màu đã chọn. Đây là chương trình: http://people.dsv.su.se/~caak1743/Canvas/canvas.html TypeError: Không thể gọi phương thức 'getContext' của null (chức năng ẩn danh)

Bây giờ tôi không thể làm cho nó có thể được kéo và thả xung quanh khu vực canvas. Và tôi đã tìm thấy một mã mà tôi nghĩ rằng có thể được thay đổi để làm việc trên chương trình của tôi nhưng tôi cứ bị: Lỗi Loại: Không thể gọi phương thức 'getContext' null init (chức năng ẩn danh) cho các dòng:

 var ctx = canvas.getContext("2d");

và tôi không biết có gì sai hoặc cách tôi có thể giải quyết nó. Tôi đã thử tìm kiếm các chương trình tương tự với các vấn đề tương tự nhưng không tìm thấy bất cứ điều gì mà tôi có thể áp dụng ở đây. Dưới đây là đoạn code mà tôi đang cố gắng để kết hợp chặt chẽ với tôi:

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;

Nguồn

2012-05-18 Fieldflower

Chỉ cần sửa nó như sau:

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

này nên làm việc. Vấn đề là yếu tố canvas cần phải sẵn sàng để chạy tập lệnh. Kể từ khi <script> trong phần <head> chạy trước khi tải <canvas>, nó sẽ gây ra lỗi.

Nguồn

2012-07-15 13:18:43 Avinash

Xin chào ông @ meetar tôi có thể sử dụng canvas trong React native – Lavaraju

Tôi đã tìm thấy hai giải pháp. Đầu tiên là thêm jquery vào trang của bạn và sau đó không cần sử dụng js trong html bằng cách gói toàn bộ mã js vào

điều gì làm cho mã chạy sau khi html đã sẵn sàng hoặc chỉ cần đổi đầu và phần thân, không cần sử dụng trong html js (nó thực thi html sớm hơn js). Chúng sẽ hoạt động.

Nguồn

2013-12-21 12:23:54 blesius

Đảm bảo rằng tập lệnh của bạn là SAU yếu tố canvas của bạn.

Nguồn

2014-02-28 10:17:23

Bạn chỉ cần thực hiện việc đó để loại bỏ lỗi. Chỉ cần thêm canvas trước tập lệnh và luôn đặt tập lệnh của bạn ở cuối.

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

<script type="text/javascript"> 

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

// whatever your code  
</script> 
</body>

Nguồn

2014-03-03 07:54:23 rohit

TypeError: Không thể gọi phương thức 'getContext' của null (chức năng ẩn danh)

Trả lời

Các vấn đề liên quan