如何在画布中绘制从页面加载的图像 [英] How do I draw an image loaded from the page in a canvas
本文介绍了如何在画布中绘制从页面加载的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个html页面：
I have a html page like this:
<html>
<body>
(1)<canvas id="cs"></canvas>
(2)<img src="/image.png" id="img"/>
</body>
</html>
我想知道如何在画布中加载和显示图像）（使用drawImage函数）。
我试过这个但它不工作：
I would like to know how I could load and display the image (2) in the canvas (1) (with drawImage function). I tried this but it doesn't work :
var img = $("#img");
ctx.drawImage(img,0,0);
推荐答案
您必须确保您的映像先加载。尝试将drawImage调用包装在一个准备好的状态中，并确保首先设置您的画布对象。
You have to ensure that your image has loaded first. Try wrapping your drawImage call in a ready statment and make certain you are setting up your canvas object first.
$().ready(function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById("img"),0,0);
})
尚未在这里找到它是一个很好的教程： https://developer.mozilla.org/en / Canvas_tutorial / Using_images
If you haven't already found it here is a nice tutorial: https://developer.mozilla.org/en/Canvas_tutorial/Using_images
这篇关于如何在画布中绘制从页面加载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
