当用户选中复选框之后，应用程序则会重新绘制该图，将其放大，以符合canvas的尺寸。
1 <html> 2 <head> 3 <title>Scaling Images</title> 4 5 <style> 6 body { 7 background: rgba(100, 145, 250, 0.3); 8 } 9 10 #canvas { 11 margin-left: 20px; 12 margin-right: 0; 13 margin-bottom: 20px; 14 border: thin solid #aaaaaa; 15 cursor: crosshair; 16 } 17 18 #controls { 19 margin: 15px; 20 padding: 0; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div id=‘controls‘> 27 <input id=‘scaleCheckbox‘ type=‘checkbox‘/> 28 Scale image to canvas 29 </div> 30 31 <canvas id=‘canvas‘ width=‘900‘ height=‘620‘> 32 Canvas not supported 33 </canvas> 34 <script src=‘example.js‘></script> 35 </body> 36 </html>
1 var canvas = document.getElementById(‘canvas‘), 2 context = canvas.getContext(‘2d‘), 3 image = new Image(), 4 scaleCheckbox = document.getElementById(‘scaleCheckbox‘); 5 6 // Functions..................................................... 7 8 function drawImage() { 9 context.clearRect(0,0,canvas.width,canvas.height); 10 11 if (scaleCheckbox.checked) { 12 context.drawImage(image, 0, 0, canvas.width, canvas.height); 13 } 14 else { 15 context.drawImage(image, 0, 0); 16 } 17 context.restore(); 18 } 19 20 // Event Handlers................................................ 21 22 scaleCheckbox.onchange = function(e) { 23 drawImage(); 24 } 25 26 // Initialization................................................ 27 28 image.src = ‘../../shared/images/waterfall.png‘; 29 image.onload = function(e) { 30 drawImage(); 31 };
如果用户选中了复选框，那么该函数就会再绘制时将图像缩放至于canvas相同的大小。否则，它就直接绘制未经缩放的对象。在这种情况下，函数都会把图像绘制在canvas的（0,0）坐标处。