如何在jQuery

时间:2019-01-24 00:50:18

标签: jquery

我正在尝试在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'

感谢您的帮助!谢谢!

2 个答案:

答案 0 :(得分:1)

  1. $(".canvas")选择 class 为“画布”的所有元素。您没有满足此选择器的任何元素,因为您的<canvas>上根本没有任何class

    您可以使用$("#canvas")通过id选择,也可以使用$("canvas")通过节点类型(<canvas>)选择。

  2. var c已经是一个jQuery对象-无需将其重新包装在$(...)

  3. 这只是基于您的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');