Canvas/liping-canvas.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas demo</title>
	<style>
		body{background-color: black;}
	</style>
</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;" />

	<canvas id="watermark-canvas" style="display: none;margin: 0 auto;border: 1px solid #aaa;"></canvas>

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

		var watermarkCanvas = document.getElementById('watermark-canvas')
		var watermarkContext = watermarkCanvas.getContext('2d');


		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)
				}

			}

			//setup watermark canvas
			watermarkCanvas.width = 600;
			watermarkCanvas.height = 100;

			watermarkContext.font = "bold 50px Arial"
			watermarkContext.fillStyle = "rgba(255,255,255,0.5)"
			watermarkContext.textBaseline = "middle"
			watermarkContext.fillText("== tinyZh ==", 20,50)

		}

		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)
			context.drawImage(watermarkCanvas,canvas.width - watermarkCanvas.width,canvas.height - watermarkCanvas.height)


		}

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