如何将图像添加到canvas

我正在用HTML中的新canvas元素进行实验。

我只是想添加一个图像的canvas，但它不工作的原因。

我有以下代码：

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错误。 图像只是不显示。

这一定是非常简单的事，我错过了…

Answer 1

也许你应该等到图像加载之后再绘制它。 试试这个：

 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, 100, 100); } } 

即在图像的onloadcallback中绘制图像。

Answer 2

请参阅这个..希望它会帮助你..

 var erase_image = new Image(); erase_image.src = '..http://img.dovov.comerazer.gif'; erase_image.onload = function() { context.drawImage(erase_image, 78, 19); } 

Answer 3

在我的情况下，我错误的function参数，这是：

 context.drawImage(image, left, top); context.drawImage(image, left, top, width, height); 

如果你期望他们是

 context.drawImage(image, width, height); 

你会将图像放在canvas外，与问题中所描述的效果相同。

Answer 4

这里是在canvas上绘制图像的示例代码 –

 $("#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是一个input控件，可以用来浏览系统上的图像。 有关示例代码的更多详细信息，请在保持高宽比的同时在canvas上绘制图像：

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html