canvas绘制图形、画布或者视频
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
语法如下:
语法一:在画布上定位图像
context.drawImage(img,x,y);
语法二:在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
语法三:剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明如下:
img:规定要使用的图像、画布或者视频;
sx:可选,开始剪切的x坐标位置。
sy:可选,开始剪切的y坐标位置
swidth:可选,被剪切图像的宽带
sheight:可选,被剪切图像的高度
x:在画布上放置图像的x坐标位置
y:在画布上放置图像的y坐标位置
width:可选,要使用的图像的宽度,
height:可选,要使用的图像的高度。
示例代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="script/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function () { var img = document.getElementById("img"); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); context.drawImage(img, 560, 0, 300, 300); context.drawImage(img, 0, 0, 400, 300, 0, 330, 200, 200); }); </script> </head> <body> <img src="images/1234.jpg" id="img"/> <canvas id="canvas" width="1200" height="550" ></canvas> </body> </html>
效果如下: