2011-07-22 29 views
17

Tôi đã thử một vài cách khác nhau, nhưng tôi vẫn gặp khó khăn với cùng một lỗi. Tôi đã tải một hình ảnh vào canvas trước, nhưng kể từ khi tôi cập nhật Safari một vài ngày trước, tôi nhận được lỗi.canvas getContext ("2d") trả về null

tôi sẽ đăng những gì tôi có vào lúc này, nhưng tôi đã cố gắng làm việc đó với jQuery, tài sản onLoad html, vv

var cvs, ctx, img; 
function init() { 
    cvs = document.getElementById("profilecanvas"); 
    ctx = cvs.getContext("2d"); /* Error in getContext("2d") */ 
    img = document.getElementById("profileImg"); 
    drawImg(); 
} 

function drawImg() { 
    ctx.drawImage(img, 0, 0); 
} 

window.onload = init(); 

Các ID là chính xác và phù hợp với vải và img thẻ thích hợp . Tuy nhiên, tôi tiếp tục nhận được TypeError: 'null' is not an object (evaluating 'cvs.getContext') và nó dường như không nhận được thêm bất kỳ. Tôi chắc chắn đó là một số lỗi ID10T, nhưng tôi hy vọng ai đó có thể cho tôi một đầu mối về những gì gây ra điều này? Cảm ơn bạn.

Chỉnh sửa: Được rồi, do đó, điều này có vẻ hoạt động khi sử dụng <body onload="init()"> ngay bây giờ. Tuy nhiên, nó chỉ hiển thị thỉnh thoảng và nếu tôi cố gắng chạy init() tắt số $(document).ready() hoặc document.onload Tôi vẫn không có may mắn và nhận được lỗi. Có suy nghĩ gì không?

+0

bạn có thể thêm html – austinbv

Trả lời

26

Khi bạn làm điều này:

window.onload = init(); 

chức năng init() sẽ được thực hiện ngay lập tức (những gì gây ra lỗi, vì getContext() được gọi là quá sớm, tức là trước khi DOM được nạp), và giá trị trả về của init() sẽ được lưu vào window.onload.

Vì vậy, bạn muốn thực sự làm điều này:

window.onload = init; 

Lưu ý các thiếu ().

+0

Geez của mình, bạn hoàn toàn đúng. Tôi thực sự không thể tin rằng tôi đã làm điều đó ... Cảm ơn rất nhiều. – stslavik

+2

+1 Đẹp đốm – Variant

+0

Tôi có cùng một vấn đề như @stslavik, trong Safari là tốt. Tôi không thể làm cho nó hoạt động được; thậm chí không có phương pháp init hoặc cách tiếp cận khác nhau, luôn luôn có vấn đề với bối cảnh là null. Có suy nghĩ gì không? :/ – trainoasis

51

Đối với những người đã truy cập trang này khi tìm kiếm getContext trả lại giá trị rỗng, điều đó có thể xảy ra nếu bạn đã yêu cầu một loại ngữ cảnh khác.

Ví dụ:

var canvas = ...; 
var ctx2d = canvas.getContext('2d'); 
var ctx3d = canvas.getContext('webgl'); // will always be null 

Điều này cũng không kém phần đúng nếu bạn đảo ngược thứ tự của các cuộc gọi.

+2

Vì vậy, tôi có thể làm gì để có được bối cảnh sau khi tôi đã yêu cầu một loại ngữ cảnh khác? – TSR

+0

@TSR, tôi có cảm giác là không thể, nhưng tôi không phải là người có thẩm quyền. Điều này có thể hữu ích: https://html.spec.whatwg.org/multipage/scripting.html # the-canvas-element –

+0

Nếu bạn cần hiển thị cả 2D và 3D trong canvas, hãy xem xét xếp chồng hai phần tử canvas và làm cho phần trên cùng có nền trong suốt. –

6

Chỉ cần đặt JavaScript vào cuối trang sẽ ... chấm dứt vấn đề của bạn ... tôi đã thử mọi thứ nhưng đây là giải pháp hợp lý và đơn giản nhất .. vì JS sẽ chỉ chạy sau khi một phần (tức là trang trên) đã tải .. hy vọng điều này giúp đỡ

+1

Đây là một trong những thực hành cơ bản mà người ta có thể làm như vậy để đạt được lỗi miễn phí JS. và nó hoạt động .. vì vậy ai đã bao giờ đã bình chọn một -1 plz xem xét lại đứng ur hoặc ít nhất là bình luận về nó ... sửa tôi nếu u có thể – Kunal0615

+1

tôi đã không downvote bạn nhưng tôi nghi ngờ lý do downvoter là trong khi vấn đề của bạn là một thực hành tốt nhất (trong một số trường hợp) câu hỏi bao gồm một lỗi cụ thể mà sẽ không được giải quyết bởi đề xuất này. Nói cách khác, nó có thể là lời khuyên tốt nhưng nó không liên quan đến câu hỏi này. – John

+0

Điều này làm việc cho tôi. Cảm ơn bạn đã nhắc nhở về các phương pháp hay. – RayLoveless

7

Điều này không liên quan gì đến câu hỏi thực tế, nhưng vì câu hỏi này là kết quả đầu tiên khi googling getContex("2d") null Tôi đang thêm giải pháp cho vấn đề tôi có:

Đảm bảo rằng bạn sử dụng getContext("2d") và không phải getContext("2D") - hãy chú ý trường hợp thấp hơn d.