在canvas上面绘制图片--drawImage实例
关键点：
1、图片居中
2、其它
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-17 课堂演示</title> 6 </head> 7 <style type="text/css"> 8 </style> 9 <body> 10 <canvas id="canvas" width="500" height="300" style="background: #A9A9A9"> 11 很抱歉，您的浏览器暂不支持HTML5的canvas 12 </canvas> 13 <input id="inps" type="range" value="1"> 14 <script> 15 16 var c=document.getElementById("canvas"); 17 var ctx=c.getContext("2d"); 18 var scaler=document.getElementById('inps') 19 var scale=0.5; 20 var img=new Image(); 21 img.src='../img/p3.jpg' 22 function draw(){ 23 var w=c.width; 24 h=c.height; 25 sw=w*scale; 26 sh=h*scale; 27 ctx.clearRect(0,0,canvas.width,canvas.height) 28 ctx.drawImage(img,-sw/2+w/2,-sh/2+h/2,sw,sh) 29 } 30 img.onload=function(){ 31 draw() 32 } 33 scaler.onchange=function(e){ 34 scale=e.target.value/50 35 alert(scale) 36 draw() 37 38 } 39 </script> 40 </body> 41 </html>