1.绘制图像
绘制图像时，需要使用drawImage方法，该方法的定义
如下所示：
drawImage(image, x, y)
第一种方法只使用三个参数，第一个参数可以是一个img元素、一个video元素，或者一个JavaScript中的image对象，使用该参数代表的实际对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。
drawImage(image, x, y, width, height)
第二种方法中前三个参数的使用方法与第一种方法中的使用方法一样，width、 height是指绘制时的图像的宽度与高度。使用第一种方法绘制出来的图像与原图大小相同，而使用第二种方法可以用来进行图像缩放。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第三种方法可以用来将画布中已绘制的图像的全部或者局部区
域复制到画布中的另一个位置上。该方法使用九个参数，image
仍然代表被复制的图像文件，sx与sy分别表示源图像的被复制区
域在画布中的起始横坐标与起始纵坐标，sWidth与sHeight表示
被复制区域的宽度与高度，dx与dy表示复制后的目标图像在画布
中的起始横坐标与起始纵坐标，dWidth与dHeight表示复制后的
目标图像的宽度与高度。该方法可以只复制图像的局部，只要将
sx与sy设为局部区域的起始点坐标，将sWidth与 sHeight设为局
部区域的宽度与高度就可以了。该方法也可以用来将源图像进行
缩放，只要将dWidth与dHeight设为缩放后的宽度与高度就可以
了。
绘制图像的步骤
首先使用不带参数的new方法创建image对象，然后设定该
image对象的src属性为需要绘制的图像文件的路径，具体代码
如下所示：
image=new Image();
image.src=“image.jpg”; //设置图像路径
然后就可以使用drawImage方法绘制该图像文件了。
事实上，即使设定好Image对象的src属性后，也不一定立刻
就能把图像绘制完毕，譬如有时该图像文件是一个来源于网络的
比较大的图像文件，这时用户就要有足够的耐心等待图像全部装
载完毕才能看见该图像了。这种情况下，只要使用如下所示的方
法，就可以解决这个问题了。
image.onload=function(){绘制图像的函数}
在image对象的onload事件中同步执行绘制图像的函数，就可
以一边装载一边绘制了。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用图片</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "red";
context.fillRect(0, 0, 400, 300);
image = new Image();
image.src = "http://img.shanhubei.com/2018/10/logo2.png";
image.onload = function()
{
drawImg(context,image);
};
}
function drawImg(context,image)
{
for(var i = 0;i < 7;i++)
context.drawImage(image,0 + i * 50,0 + i * 25,199,46);
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
2.图像的局部放大
图片的局部放大，可以使用如下方法实现。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用图片</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "red";
context.fillRect(0, 0, 400, 300);
image = new Image();
image.src = "http://img.shanhubei.com/2018/10/logo2.png";
image.onload = function()
{
drawImg(context,image);
};
}
function drawImg(context,image)
{
var i=0;
//首先调用该方法绘制原始图像
context.drawImage(image,0,0,199,46);
//绘制将局部区域进行放大后的图像
context.drawImage(image,123,5,67,90,110,110,100,100);
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
3.图像平铺
所谓图像平铺就是用按一定比例缩小后的图像将画布填满，有
两种方法可以实现该技术，一种是使用前面所介绍drawImage
方法，另一种是使用图形上下文对象的createPattern方法，该
方法定义如下所：
context.createPattern(image,type);
该方法使用两个参数，image参数为要平铺的图像，type参数的
值必须是下面的字符串之一：
no-repeat：不平铺
repeat-x：横方向平铺
repeat-y：纵方向平铺
repeat：全方向平铺
4.图像裁剪
canvas API的图像裁剪功能是指，在画布内使用路径，只绘
制该路径所包括区域内的图像，不绘制路径外部的图像。使用图形上下文对象的不带参数的clip方法来实现canvas 元素的图像裁剪功能。该方法使用路径来对canvas 画布设置一个裁剪区域。因此，必须先创建好路径。路径创建完成后，调用clip方法设置裁剪区域。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片的裁剪</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
var gr = context.createLinearGradient(0,200,150,0);
gr.addColorStop(0,'rgb(255,255,0)');
gr.addColorStop(1,'rgb(0,255,255)');
context.fillStyle = gr;
context.fillRect(0, 0, 200, 200);
image = new Image();
image.onload = function()
{
drawImg(context,image);
};
image.src = "http://img.shanhubei.com/2018/10/logo2.png";
}
function drawImg(context,image)
{
createyuanClip(context);
context.drawImage(image,-40,0,199,64);
}
function createyuanClip(context)
{
context.beginPath();
context.arc( 120, 100, 75, 0, Math.PI * 2, true);
context.closePath();
context.clip();
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
5.像素的处理
使用图像上下文对象的getImageData方法来获取图像中的像
素，该方法的定义如下所示。
var imagedata = context.getImageData(sx,sy,sw,sh);
该方法使用四个参数，sx、sy分别表示所获取区域的起点横坐标、起点纵坐标，sw、sh分别表示所获取区域的宽度和高度。
Imagedata变量是一个CanvasPixelArray对象，具有
height，width，data等属性。data属性是一个保存像素数据
的数组，内容类似于“[r1,g1,b1,a1, r2,g2,b2,a2,
r3,g3,b3,a3,…]”,其中，r1,g1,b1,a1为第一个像素的红色值，绿色值，蓝色值，透明值；r2,g2,b2,a2分别为第二个像素的红色值，绿色值，蓝色值，透明值，依次类推。data.length为所取得像素的数量。
图像上下文对象的putImageData方法
该方法的定义如下所示：
context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth, dirtyHeight]);
该方法使用七个参数，imagedata为前面所述的像
素数组，dx、dy分别表示重绘图像的起点横坐标，起
点纵坐标，后面dirtyX、dirtyY、dirtyWidth、
dirtyHeight这四个参数为可选参数，给出一个矩形
的起点横坐标、起点纵坐标、宽度与高度，如果加上
这四个参数，则只绘制像素数组中这个矩形范围内的
图像。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片的裁剪</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
var image = new Image();
image.src = "http://img.shanhubei.com/2020/01/%E7%8F%8A%E7%91%9A%E8%B4%9D.jpg";
image.onload = function()
{
context.drawImage(image,0,0);
var imagedata = context.getImageData(0,0,image.width,image.height);
for(var i =0, n=imagedata.data.length;i<n;i+=4)//使用i+=4确保确保是像素
{
imagedata.data[i+0]=255-imagedata.data[i+0]; //得到反向的颜色红色
imagedata.data[i+1]=255-imagedata.data[i+2]; //得到反向的颜色绿色
imagedata.data[i+2]=255-imagedata.data[i+1]; //得到反向的颜色蓝色
}
context.putImageData(imagedata,0,0);
} ;
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
