我正在尝试在jQuery中使用getContext('2d');
。我见过this question,
但它似乎不起作用。可能是由于更新,因为该问题是在9年前问到的。我在头部添加了<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
,但是使用了不同的<script>
标签。这是我的所有代码:
var c = $('.canvas');
var ctx = $(c)[0].getContext('2d');
window.onload = function() {
$c.width(500);
$c.height(250);
$c.css({'background-color': '#e2e2e2', 'margin': '0 auto', 'display': 'block'});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id='canvas'>You're browser does not support the requirements to play this game. Update your browser or use a different browser</canvas>
我正在使用Google并通过F12检查控制台,它说-
未捕获的TypeError:无法读取未定义的属性'getContext'
感谢您的帮助!谢谢!
答案 0 :(得分:1)
$(".canvas")
选择 class 为“画布”的所有元素。您没有满足此选择器的任何元素,因为您的<canvas>
上根本没有任何class
。
您可以使用$("#canvas")
通过id
选择,也可以使用$("canvas")
通过节点类型(<canvas>
)选择。
var c
已经是一个jQuery对象-无需将其重新包装在$(...)
这只是基于您的window.onload
的预感,但是如果您的脚本不在<body>
或的末尾,则它位于{{1 }},但没有包装在<head>
中,代码会在$(document).ready( ... )
元素存在之前寻找它。
<canvas>
我严格根据个人喜好将$(document).ready(function() { // Remove this line if your code is at the end of <body>
var $c = $('#canvas');
var ctx = $c.get(0).getContext('2d');
}); // Remove this line if your code is at the end of <body>
更改为var c
,将var $c
更改为[0]
。
答案 1 :(得分:-1)
$(“#canvas”)[0] .getContext('2d');