Canvas/index.html at master · tinyzh/Canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas demo</title>
</head>
<body>
	<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;"></canvas>
	<input type="range" id="scale-range" min="0.2" max="2.0" step="0.01" value="1.0" style="display: block;margin: 20px auto;width: 500px;" />

	<script>
		var canvas = document.getElementById('canvas')
		var context = canvas.getContext('2d');
		var slider = document.getElementById('scale-range')
		var image = new Image();


		window.onload = function(){
			canvas.width = 1152/2;
			canvas.height = 864/2;

			var scale = slider.value;

			image.src = "img.jpg"
			image.onload = function(){
				// context.drawImage(image,0,0)
				// context.drawImage(image,0,0,canvas.width,canvas.height)
				// context.drawImage(image,600,200,400,400,0,0,canvas.width,canvas.height)
				drawImageByScale(scale);

				slider.onmousemove = function(){
					scale = slider.value;
					drawImageByScale(scale)
				}

			}

		}

		function drawImageByScale(scale){
			var imageWidth = canvas.width * scale;
			var imageHeight = canvas.height * scale;

			var dx = canvas.width / 2 - imageWidth / 2;
			var dy = canvas.width / 2 - imageHeight / 2;

			context.clearRect(0,0,canvas.width,canvas.height); //先清空

			context.drawImage(image,dx,dy,imageWidth,imageHeight)


		}

	</script>
</body>
</html>