dee*_*ive 14 html javascript canvas
大家好我目前正在测试使用canvas元素绘制所有背景(我稍后将添加效果到这些图像,这是我不使用CSS加载图像的原因),说我目前在加载图像时遇到困难在画布上.这是代码:
<html>
<head>
<title>Canvas image testing</title>
<script type="text/javascript">
function Test1() {
var ctx = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//Loading of the home test image - img1
var img1 = new Image();
img1.src = 'img/Home.jpg';
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawimage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
}
}
</script>
<style type="text/css">
canvas { border: 2px solid black; width: 100%; height: 98%; }
</style>
</head>
<body onload="Test1();">
<canvas id="canvas" width="1280" height="720"></canvas>
</body>
</html>
我认为我没有正确加载图像,但我不确定.
fre*_*osh 22
有几件事:
drawimage应该drawImage- 注意资本i.getElementById正在寻找ID为的元素canvas,但它应该是test1.canvas是标签,而不是ID.canvas变量(例如在你的canvas.getContext行中)替换变量ctx,因为那是你用来选择canvas元素的变量.onload在设置src图像之前绑定处理程序.所以你的函数应该像这样结束:
function Test1() {
var ctx = document.getElementById('test1');
if (ctx.getContext) {
ctx = ctx.getContext('2d');
//Loading of the home test image - img1
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
img1.src = 'img/Home.jpg';
}
}
小智 8
使用较新的JavaScript功能:
let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);
并且loadImage函数看起来像这样:
function loadImage(url) {
return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}
小智 7
在为图像设置src之前移动onload事件侦听器.
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
img1.src = 'img/Home.jpg';
将本地文件资源（url）分配给图像源，并使用要加载的画布中的上下文绘制图像。而已。参见下面的代码。
var loadImage = function (url, ctx) {
var img = new Image();
img.src = url
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
}