drawImage
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> </head> <body> <canvas id='myCanvas' width='800' height='400'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var cxt = c.getContext('2d'); var img = new Image(); img.src = 'face.jpg'; img.onload = function() { // 从10,10坐标开始绘制整个图片 cxt.drawImage(img, 10, 10); // 从260,10开始把图片绘制到100x100的矩形区域内 cxt.drawImage(img, 260, 10, 100, 100); // 截取图片50,50到100,100的区域，从260,130开始，绘制到100x100区域内 cxt.drawImage(img, 50, 50, 100, 100, 260, 130, 100, 100); }; </script> </body> </html>