从URL加载图像并绘制到HTML5 Canvas

杰克·哈拉姆

我无法从javascript中的网址加载图片。下面的代码有效,但是我不想从html加载图像。我想使用纯JavaScript从URL加载图像。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);
亚历山大·奥玛拉

很简单,只需在JavaScript中创建图像对象,设置src,然后等待load事件再绘制即可。

工作示例:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
<canvas id="myCanvas"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

HTML5 Canvas:向不断绘制的图像添加碰撞

来自分类Dev

HTML5 Canvas:向不断绘制的图像添加碰撞

来自分类Dev

如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

来自分类Dev

如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

来自分类Dev

HTML5 Canvas 从浏览器缓存加载图像

来自分类Dev

绘制HTML5 Canvas脉冲线

来自分类Dev

HTML5 Canvas线条未绘制

来自分类Dev

HTML5 Canvas无法绘制

来自分类Dev

在保留图像的同时在HTML5 Canvas中绘制图像

来自分类Dev

HTML 5 Canvas + JQuery + Rails 5.2 - 不绘制到 Canvas?

来自分类Dev

通过HTML5 Canvas Context缩放并在给定图像上绘制网格

来自分类Dev

列表内的HTML5 Canvas,无法在所有画布上绘制图像

来自分类Dev

HTML5 Canvas-如何在画布上的图像上绘制矩形

来自分类Dev

通过HTML5 Canvas Context缩放并在给定图像上绘制网格

来自分类Dev

为什么不能在HTML5 Canvas中绘制图像阵列?

来自分类Dev

HTML5 Canvas:我正在尝试将图像加载到画布

来自分类Dev

仅在加载后显示HTML5 Canvas中的数百个微小图像

来自分类Dev

我怎么知道HTML5 Canvas完成绘制的时间?

来自分类Dev

在HTML5 <canvas>上从不同的角度绘制模型

来自分类Dev

在HTML5 Canvas上绘制并获取坐标

来自分类Dev

如何使用JavaScript在HTML5 Canvas中绘制圆?

来自分类Dev

HTML5 Canvas绘制点之间的线距

来自分类Dev

HTML5 Canvas:沿文本基线绘制线条

来自分类Dev

如何使用html5 canvas绘制多级饼图?

来自分类Dev

HTML5 canvas javascript

来自分类Dev

HTML5 canvas javascript

来自分类Dev

HTML5 Canvas将原始图像数据保存到数据URL

来自分类Dev

HTML5 Canvas:更改图像颜色

来自分类Dev

HTML5如何在Canvas中调用图像

Related 相关文章

热门标签

归档