Canvas图像（上）Canvas图像API可以加载图像数据，然后直接将图像应用到画布上。图像数据也可以被裁剪和拼贴以显示用户想要的部分。此外，Canvas还提供了像素数据的存储功能，以便于对其进行操作和重绘到画布上。1.ImagebaseCanvasAPI提供DOM定义的Image对象类型，在javascript中定义图片，创建JavaScript的方法：varimage=newImage();，然后设置图片的源文件，只需要为新创建的Image对象指定URL的src属性就足够了。在代码调用图像之前，它必须验证它是否已正确加载并准备就绪。您可以通过设置一个在图像加载事件触发时立即触发的事件监听器来实现。加载图像后，可以通过多种方式将其显示在屏幕上。Canvas提供如下方法在画布上显示图像数据：drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh);Image表示图像对象，sx,sy表示开始复制源图像的“源位置”。sw和sh表示从(sx,sy)中取出的矩形的大小，dx和dx表示画在画布上的位置，dw,dh表示画在画布上的图像的大小。以下代码显示了如何在画布上绘制图像：varimage=newImage();image.addEventListener('load',eventImageLoaded,false);image.src='img/1945.png';函数eventImageLoaded(){context.drawImage(image,100,100,32,32,100,100,32,32);}2.帧动画帧动画是指一种类似的现代技术，通过绘制相同大小的每一帧来模拟动画。Canvas可以使用drawImage()函数和两个拼版制作动画。需要创建一个计数变量作为计数器，还必须创建一个计时循环。代码示例如下：varcount=20;变种图像=新图像（）；image.addEventListener('load',eventImageLoaded,false);image.src='img/timg.jpg';functioneventImageLoaded(){启动();}functionStartUp(){setInterval(drawScreen,100);}绘制屏幕（）；函数drawScreen(){context.lineWidth=5;context.strokeRect(0,0,theCanvas.width,theCanvas.height);context.drawImage(image,count,20,135,80,100,100,135,90);计数+=135；控制台日志（计数）；如果（计数>587）{计数=20；然后可以生成这样的动画：
