復(fù)制代碼代碼如下: div id="container" img id="bg" width="390" height="560" src="https://cdn14.x6kj.com/uploads/allimg/190627/150K21218-0.jpg" / canvas id="drewpanel" width="390" height="560" p some info to tell the people whose broswer doesn't support html5 /p /canvas /div
復(fù)制代碼代碼如下: div id="container" canvas id="bg" width="390" height="560" /canvas canvas id="drewpanel" width="390" height="560" p some info to tell the people whose broswer doesn't support html5 /p /canvas /div
復(fù)制代碼代碼如下: window.addEventListener('load', function () { // Get the canvas element. var elem = document.getElementById('bg'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context || !context.drawImage) { return; } // Create a new image. var img = new Image(); // Once it's loaded draw the image on the canvas. img.addEventListener('load', function () { // Original resolution: x, y. context.drawImage(this, 0, 0); // Now resize the image: x, y, w, h. context.drawImage(this, 160, 0, 120, 70); // Crop and resize the image: sx, sy, sw, sh, dx, dy, dw, dh. context.drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70); }, false); img.src = 'https://cdn14.x6kj.com/uploads/allimg/190627/150K21218-0.jpg'; }, false); //直接在文檔里拿下來的代碼 請注意為了opera和ie9 onload事件是必須要的，不然圖片會是一片空白，當(dāng)然Chrome下不會這樣
