gpt4 book ai didi

javascript - document.getElementById().getContext ('2d' ) 不是函数

转载 作者:数据小太阳 更新时间:2023-10-29 03:51:09 24 4
gpt4 key购买 nike

这不断收到一条错误消息,说它不是一个函数,请帮忙!!

var ctx = document.getElementById('canvas').getContext('2d');

HTML:

<html>
<head>
<title>Canvas Race</title>
<script src="jquery-2.2.3.js"></script>
<style type="text/css">
canvas {
border: 1px solid black;
background-image: url("http://www.gamefromscratch.com/image.axd?picture=road2048v2.png");
background-size: 200px 300px;
background-position-y: -81px;
}
</style>
</head>
<body>

<div id="canvas">
<canvas id="myCanvas" width="1100" height="150" ></canvas>
</div>
<div id="winner"></div>

</body>
</html>

Javascript:

<script type="text/javascript">
var blueCar = new Image();
var redCar = new Image();

// images
function image(){
blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg";
redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png";
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';

//blue car
ctx.drawImage(blueCar, 10, 10, 100, 100);
}
image();

</script>

我已经四处搜索,但我还没有找到任何有用的东西;不知道它是否与我的 jquery 有任何关系。

最佳答案

您在那里引用了具有该 ID 的 div...DIV 没有诸如 .getContext() 之类的属性方法,因此这里是工作部分:

    var blueCar = new Image();
var redCar = new Image();

// images
function image(){
blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg";
redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png";
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';

//blue car
ctx.drawImage(blueCar, 10, 10, 100, 100);
}
image();
<html>
<head>
<title>Canvas Race</title>
<script src="jquery-2.2.3.js"></script>
<style type="text/css">
canvas {
border: 1px solid black;
background-image: url("http://www.gamefromscratch.com/image.axd?picture=road2048v2.png");
background-size: 200px 300px;
background-position-y: -81px;
}
</style>
</head>
<body>

<div id="mycanvas">
<canvas id="canvas" width="1100" height="150" ></canvas>
</div>
<div id="winner"></div>

</body>
</html>

关于javascript - document.getElementById().getContext ('2d' ) 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37198733/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com