-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcustom.html
62 lines (50 loc) · 1.95 KB
/
custom.html
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
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE html>
<html>
<head>
<title>Canvas 2D Context API Primer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--SCRIPTS-->
<script type="text/javascript">
/*
# Context 2D API: transform
The parameters of transform represent a matrix of the following format.
a c e
b d f
0 0 1
This matrix is multiplied with the transformation matrix of the current context.
# Standard Definition.
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-transform
# Function signature
void transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
*/
function draw(){
// Get a reference to the canvas
var canvas = document.getElementById('canvas');
// Get a reference to the drawing context
var ctx = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translation matrix:
// 1 0 tx
// 0 1 ty
// 0 0 1
var tx = canvas.width / 2;
var ty = canvas.height / 2;
// translate context to center of canvas
ctx.transform(1, 0, 0, 1, tx, ty);
ctx.fillStyle = 'blue';
ctx.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="1024" height="600">
This browser or document mode doesn't support canvas
</canvas>
</body>
</html>