首页 > 代码库 > html5 canvas图像-图像的缩放

html5 canvas图像-图像的缩放

2024-07-04 15:37:54   226人阅读

当用户选中复选框之后，应用程序则会重新绘制该图，将其放大，以符合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 = http://www.mamicode.com/shared/images/waterfall.png‘;
29 image.onload = function(e) {
30    drawImage();
31 };

 如果用户选中了复选框，那么该函数就会再绘制时将图像缩放至于canvas相同的大小。否则，它就直接绘制未经缩放的对象。在这种情况下，函数都会把图像绘制在canvas的（0,0）坐标处。

 


联系
我们