-
Notifications
You must be signed in to change notification settings - Fork 53
Expand file tree
/
Copy pathimage.html
More file actions
57 lines (52 loc) · 1.72 KB
/
Copy pathimage.html
File metadata and controls
57 lines (52 loc) · 1.72 KB
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-image</title>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
<div style="display:none;">
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
<img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
</div>
<script>
// function draw() {
// var ctx = document.getElementById('canvas').getContext('2d');
// var img = new Image();
// img.onload = function(){
// ctx.drawImage(img,0,0);
// ctx.beginPath();
// ctx.moveTo(30,96);
// ctx.lineTo(70,66);
// ctx.lineTo(103,76);
// ctx.lineTo(170,15);
// ctx.stroke();
// }
// img.src = './../images/background.jpg';
// }
// function draw() {
// var ctx = document.getElementById('canvas').getContext('2d');
// var img = new Image();
// img.onload = function () {
// for (var i = 0; i < 4; i++) {
// for (var j = 0; j < 3; j++) {
// ctx.drawImage(img, j * 50, i * 38, 50, 38);
// }
// }
// };
// img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
// }
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw slice
ctx.drawImage(document.getElementById('source'),
33, 71, 104, 124, 21, 20, 87, 104);
// Draw frame
ctx.drawImage(document.getElementById('frame'), 0, 0);
}
draw();
</script>
</body>
</html>