html怎样把图片放进画布中,HTML5 canvas操作图片

1.canvas操作图像的能力

canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。和往常一样，canvas操作图像需要两步基本操作：

获取图片源：获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片

绘制到画布上：使用drawImage()函数将图片绘制到画布上

2.获取图片源

绘制图像之前，我们要先获取图片源。在canvas绘制中，我们可以将以下图片作为

图片源：

图片源可以是

HTMLImageElement：这些图片是由Image()函数构造出来的，或者任何的< img >元素

HTMLVideoElement：用一个HTML的 < video >元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

HTMLCanvasElement：可以使用另一个 < canvas > 元素作为你的图片源。

ImageBitmap：这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

这些源统一由 CanvasImageSource类型来引用。

如何获取以上的图片源对象呢？

(1)使用相同页面内的图片

document.images集合

document.getElementsByTagName()方法

如果你知道你想使用的指定图片的ID，你可以用document.getElementById()获得这个图片

(2)使用其它域名下的图片

在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas。

(3)使用其它 canvas 元素

和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

一个常用的应用就是将第二个canvas作为另一个大的 canvas 的缩略图。

(4)用Imag()构造HTMLImageElement

var img = new Image(); // 创建一个元素

img.src = '路径名'; // 设置图片源地址

注意：在使用image对象的图片前，要判断其是否加载完毕：

var img=new Image();

img.src="路径";

img.οnlοad=function()

{

//func_drawImage

}

(5)通过data：url嵌入图片

使用data:url方法的

优点是，图片内容即时可用，无须再到服务器端重新加载。可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。

缺点是，图像没法缓存，图片大的话内嵌的 url 数据会相当的长：

img.src="Base64编码";

(6)使用视频帧

我们可以通过getElementById，或者getElementsByTagName来获取HTML标记中的视频< video >

var myvideo=document.getElementById('myvideo');

3.将图片绘制到画布上

我们在获取了图片源之后，就能使用drawImage方法将图片渲染到canvas中了，drawImage方法有三种形态：

(1)drawImage(image,x,y)

image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

举例

下面用一个外部的Excel图像作为一线性图的背景。导入背景之后我们就能省下不少代码，同时在一些难以绘制的情况下，导入外部图片是一种很好的策略。这里只用到一个 image 对象，于是就在它的 onl oad 事件响应函数中触发绘制动作。

function draw()

{

var canvas=document.getElementById("canvas");

if(canvas.getContext)

{

var ctx=canvas.getContext('2d');

var img=new Image();

img.src="form.png";

img.οnlοad=function()

{

ctx.drawImage(img,0,0);

ctx.beginPath();

ctx.moveTo(90,400);

ctx.lineTo(250,300);

ctx.lineTo(550,200);

ctx.lineTo(750,500);

ctx.strokeStyle="blue";

ctx.stroke();

}

}

}

(2)缩放drawImage(img,x,y,width,height)

drawImage可以操作图像，对其进行缩放，image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标，width和height是图片的宽高。

drawImage(img,x,y,width,height)示例：

将图片按照200*150的大小绘制在canvas画布上，图片的起始位置是200i+150j

function draw()

{

var canvas=document.getElementById("canvas");

if(canvas.getContext)

{

var ctx=canvas.getContext('2d');

var img=new Image();

img.src="spiderMan.jpg";

img.οnlοad=function()

{

for(var i=0;i<5;i++)

{

for(var j=0;j<5;j++)

{

ctx.drawImage(img,200*i,150*j,200,150);

}

}

}

}

}

(3)切片drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)

切片方法包含了8个参数：

sx：图像源的切片x向偏移量

sy：图像源的切片x向偏移量

sWidth：图像源的切片宽度

sHeight：图像源的切片高度

dx：目标显示位置x

dy：目标显示位置y

dWidth：目标显示宽度

dHeight：目标显示高度

drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)示例：

我们先将图片直接插入HTML标记中，然后通过getElementById获取img元素节点，再用drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)切片将新的图片放在右下角

function draw()

{

var canvas=document.getElementById("canvas");

if(canvas.getContext)

{

var ctx=canvas.getContext('2d');

var img=new Image();

img.src="spiderMan.jpg";

img.οnlοad=function()

{

var img=document.getElementById('img');//获取img对象

ctx.drawImage(img,420,40,200,270,400,0,150,200);

}

}

}

飞翔的哈士奇

发布了118 篇原创文章 · 获赞 132 · 访问量 2万+

私信

关注

标签：canvas,drawImage,img,ctx,HTML5,var,图片

来源： https://blog.csdn.net/weixin_44307065/article/details/104097615