html5 canvas图像-图像的缩放
2020-12-13 04:03
标签：style blog class code c java 当用户选中复选框之后，应用程序则会重新绘制该图，将其放大，以符合canvas的尺寸。 如果用户选中了复选框，那么该函数就会再绘制时将图像缩放至于canvas相同的大小。否则，它就直接绘制未经缩放的对象。在这种情况下，函数都会把图像绘制在canvas的（0,0）坐标处。 html5 canvas图像-图像的缩放,搜素材,soscw.com html5 canvas图像-图像的缩放 标签：style blog class code c java 原文地址：http://www.cnblogs.com/zxmeigood/p/3730067.html
1 html>
2 head>
3 title>Scaling Imagestitle>
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 };