使用javaScript将图像加载到画布上_Javascript_Html_Canvas

使用javaScript将图像加载到画布上

javascript html canvas

使用javaScript将图像加载到画布上,javascript,html,canvas,Javascript,Html,Canvas,Hi all im目前正在测试使用canvas元素绘制所有背景（稍后我将在这些图像中添加效果，这也是我不使用css加载图像的原因），这表示我目前在将图像加载到画布上时遇到困难。代码如下： <html> <head> <title>Canvas image testing</title> <script type="text/javascript"> function Test1() {

Hi all im目前正在测试使用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>


画布图像测试
函数Test1（）{
var ctx=document.getElementById（'canvas'）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//加载家庭测试图像-img1
var img1=新图像（）；
img1.src='img/Home.jpg'；
//测试图像的绘制-img1
img1.onload=函数（）{
//绘制背景图像
ctx.drawimage（img1,0,0）；
//在上面画一个盒子
ctx.fillStyle=“rgba（200,0,0,0.5）”；
ctx.fillRect（0,0500500）；
};
}                
}
画布{边框：2倍纯黑；宽度：100%；高度：98%；}

我认为我没有正确加载图像，但我不确定。

有几件事：

drawimage

应该是

drawimage

-注意大写字母i

您的

getElementById

正在查找ID为

canvas

的元素，但它应该是

test1

<代码>画布是标记，而不是ID

将

canvas

变量（例如在

canvas.getContext

行中）替换为

ctx

，因为这是用于选择画布元素的变量

在设置图像的

src

之前，先绑定

onload

处理程序

所以你的函数应该是这样的：

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';
    }
}

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}

在为映像设置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';

使用较新的JavaScript功能：

let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);

而

loadImage

函数如下所示：

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';
    }
}

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}

将本地文件资源（url）分配给图像源，并使用要加载的画布中的上下文绘制图像。就这样。参见下面的代码

var loadImage = function (url, ctx) {
  var img = new Image();
  img.src = url
  img.onload = function () { 
    ctx.drawImage(img, 0, 0);
  }
}

var c=document.getElementById（“画布”）；
var ctx=var ctx=c.getContext（“2d”）；
var img1=新图像（）；
//测试图像的绘制-img1
img1.onload=函数（）{
//绘制背景图像
ctx.drawImage（img1,0,0）；
//在上面画一个盒子
ctx.fillStyle=“rgba（200,0,0,0.5）”；
ctx.fillRect（0,0500500）；
};
img1.src='img/Home.jpg'
freejosh是对的——但我只是想补充一点，在画布上使用变量ctx
并在以后用上下文覆盖它不是一种很好的风格。您可以使用var canvas
作为画布引用。有一个问题，为什么我们必须在onload事件之后设置图像源？@AlyssaGono我认为这是一个很好的解释。第一行报告“Uncaught SyntaxError:Unexpected reserved word”@omod您必须将此代码包含在async
函数中。