圖片的繪制 · 前端速查手冊

>[success] # 圖片的繪制 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body>  <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.加載圖片到內存即可*/ /*var img = document.createElement('img'); img.src = 'image/01.jpg';*/ /*創建對象*/ var image = new Image(); /*綁定加載完成事件*/ image.onload = function () { /*實現圖片繪制*/ console.log(image); /*繪制圖片的三種方式*/ /*3參數*/ /*圖片對象*/ /*繪制在畫布上的坐標 x y*/ //ctx.drawImage(image,100,100); /*5個參數*/ /*圖片對象*/ /*繪制在畫布上的坐標 x y*/ /*是圖片的大小不是裁剪是縮放*/ //ctx.drawImage(image,100,100,100,100); /*9個參數*/ /*圖片對象*/ /*圖片上定位的坐標 x y */ /*在圖片上截取多大的區域 w h*/ /*繪制在畫布上的坐標 x y*/ /*是圖片的大小不是裁剪是縮放*/ ctx.drawImage(image,400,400,400,400,200,200,100,100); }; /*設置圖片路徑*/ image.src = 'image/02.jpg'; </script> </body> </html> ~~~