canvas绘制图片drawImage使用方法

　　不得不说，html5中的canvas真的非常强大，从图片处理，到视频处理，再到游戏开发，都能见到canvas的身影，然而，就这一个标签，功能居然如此强大，这主要归功于canvas强大的API，也正是因为这么多的API，让很多人对canvas望而却步。

　　drawImage绘制图片

　　是提供的一个方法，通过这个函数我们可以把一张图片绘制到canvas中。首先看看这个方法的声明：

　　void ctx.drawImage(image, dx, dy);

　　void ctx.drawImage(image, dx, dy, dWidth, dHeight);

　　void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

　　先来解释下几个参数：

　　这么多的参数，我来用一句话总结下这个函数的功能：从任意位置截取指定大小的图片并将其以指定大小绘制在canvas上的任意位置。这里截取的大小就是和来设置，和就是绘制的大小。

　　说了这么多，来实际动手做一下：

　　效果：

　　cool， 左侧是video标签显示的视频，右侧是我们用canvas绘制的，每20毫秒绘制一次，很棒哦。如果我们把时间放长一点，就能实现卡顿的效果

　　drawImageData兼容性

　　到此这篇关于canvas绘制图片drawImage使用方法的文章就介绍到这了,更多相关canvas绘制图片drawImage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！