为什么图片加载不出来
代码有什么问题，我找不到问题所在。我认为这是因为drawFrame和loadImage函数，但我不知道。那么有没有办法让图像加载后你仍然可以移动它并拍摄呢？
当我尝试删除drawFrame函数时，什么也不起作用。如果可能的话，有没有办法将子弹从方形改为圆形？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
canvas {
cursor: crosshair;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<canvas id="Trump"></canvas>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
(async function main() {
var canvas = document.getElementById('Trump');
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//const fps = 60;
const ronaNum = 30; // number of particles at start
const ronaSize = 70; // corona size
const ronaSpeed = 100; // speed
let chinabmg;
function draw() {
$("canvas").one("click", function () {
chinabmg = new sound("stankytrumpchina.mp3");
chinabmg.play();
});
//mutes when clicked on m
document.body.onkeyup = function (e) {
if (e.keyCode == 77) { chinabmg.stop() }
};
//compatability
var requestAnimationFrame = window.requestAnimationFrame || //Chromium
window.webkitRequestAnimationFrame || //Webkit
window.mozRequestAnimationFrame || //Mozilla Geko
window.oRequestAnimationFrame || //Opera Presto
window.msRequestAnimationFrame || //IE Trident?
function (callback) { //Fallback function
};
子衿沉夜1回答
-
智慧大石
//draw players function loadImage(path) { let image = new Image(); let promise = new Promise((resolve, reject) => { image.onload = () => resolve(image); image.onerror = reject }); image.src = path; //Add the following line ctx.drawImage(image,playerList[0].x,playerList[0].y); return promise; } // change loadImage.src = 'trump.gif' into this loadImage('trump.gif');
随时随地看视频慕课网APP
相关分类
JavaScript