将图像插入HTML5画布 [英] Insert an image into HTML5 canvas

问题描述

我正在使用HTML5 Canvas。

我想在myCanvas中插入一张图片。



以下是我使用的网站：



HTML5 Canvas Cheat Sheet [ ^ ]



HTML：

I am using HTML5 Canvas.
I would like to insert an image into myCanvas.

Here are the site I am using:

HTML5 Canvas Cheat Sheet[^]

HTML:

<canvas id="myCanvas" width="1000" height="1000"></canvas>

JavaScript：

JavaScript:

var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var context1 = canvas.getContext('2d');
            var context2 = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;

            var x = centerX;
            var y = centerY;
            var imageObj = new Image();
            imageObj.src = 'C:/Users/User/Documents/folder1/Image Folder/Image1.jpg';
            imageObj.onload = function () {
                context.drawImage(imageObj, x, y);
            };

我尝试过：



我试图从< img>添加图像但我想使用file.jpg。

What I have tried:

I have tried to add an image from <img> but I want to use a file.jpg.

推荐答案

你的代码有两个问题：



）主要的一个：脚本很可能在完成DOM加载之前加载并执行，因此，调用时可能没有myCanvas元素：document.getElementById（'myCanvas'）;.

2）因为您使用本地文件，但是使用完整路径（例如，c：\ ...），您应该指定协议，因此请使用file：// C：/ Users / User / Documents / folder1 / Image Folder / Image1.jpg。虽然在某些浏览器中仍然可以在不指定协议的情况下工作，但建议在使用完整URL / URI时使用该协议（包括本地驱动器的完整路径！）。



完整的代码是：

There are two problems with your code:

1) the main one: very likely the script loads and executes before finishing the DOM loading, thus, you may not have the "myCanvas" element when calling: document.getElementById('myCanvas');.
2) since you use local files, but with a full path (e.g., c:\...") you should specify the protocol, so use "file://C:/Users/User/Documents/folder1/Image Folder/Image1.jpg". While in some browsers may still work without specifying the protocol, it is recommended to use the protocol when using full URLs/URIs (including full paths from local drives!).

The complete code is:

window.addEventListener("load", function() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var context1 = canvas.getContext('2d');
  var context2 = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
 
  var x = centerX;
  var y = centerY;
  var imageObj = new Image();
  imageObj.src = 'file://C:/Users/User/Documents/folder1/Image Folder/Image1.jpg';
  imageObj.onload = function () {
    context.drawImage(imageObj, x, y);
  };
});

此外，格式化代码是个好主意，也不要使用var代替同一个块或方法中的每个变量，只是昏迷分隔变量。

In addition, formatting your code is a good idea and also don't use "var" for each variable in the same block or method, just coma separate the variables.

HTML5 Canvas图像教程 [ ^ ]



< canvas id =myCanvaswidth =578height =400>< / canvas>

< script>

var canvas = document.getElementById（'myCanvas'）;

var context = canvas.getContext（'2d'）;

var imageObj = new Image（）;



imageObj.onload = function（）{

context.drawImage（imageObj，69 ，50）;

};

imageObj.src ='http：//www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

< / script>

HTML5 Canvas Image Tutorial[^]

<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>

这篇关于将图像插入HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！