复制代码代码如下: <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 doesnt support html5</p> </canvas> </div>
复制代码代码如下: 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 its 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://cdn.studyweb.cn/imgupload/000045/20100917.jpg; }, false); //直接在文档里拿下来的代码 请注意为了opera和ie9 onl oad事件是必须要的,不然图片会是一片空白,当然Chrome下不会这样