我正在尝试使用 HTML 中的新画布元素。
我只是想在画布上添加一个图像，但由于某种原因它不起作用。
我有以下代码：
HTML
<canvas id="viewport"></canvas>
CSS
canvas#viewport { border: 1px solid white; width: 900px; }
JS
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'img/base.png';
context.drawImage(base_image, 100, 100);
}
图像存在并且我没有收到 JavaScript 错误。图像只是不显示。
这一定是我错过的一些非常简单的事情......
您需要等到图像加载后才能绘制。试试这个：
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
}
}
即在图像的onload 回调中绘制图像。
这是在画布上绘制图像的示例代码-
$("#selectedImage").change(function(e) {
var URL = window.URL;
var url = URL.createObjectURL(e.target.files[0]);
img.src = url;
img.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, 500, 500);
}});
在上面的代码中 selectedImage 是一个输入控件，可用于在系统上浏览图像。有关在保持纵横比的同时在画布上绘制图像的示例代码的更多详细信息：
http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html
你必须使用 .onload
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
const drawImage = (url) => {
const image = new Image();
image.src = url;
image.onload = () => {
ctx.drawImage(image, 0, 0)
}
}
这就是为什么
如果在创建画布后首先加载图像，则画布将无法传递所有图像数据来绘制图像。所以你需要先加载图片附带的所有数据，然后才能使用drawImage()
就我而言，我弄错了函数参数，它们是：
context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);
如果你期望他们
context.drawImage(image, width, height);
您会将图像放置在画布外，效果与问题中描述的相同。
context.drawImage提供三种方式供您选择。
drawImage(image: CanvasImageSource, dx: number, dy: number): void;
drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
或者你可以参考w3school-canvas drawImage 的解释。