-
Notifications
You must be signed in to change notification settings - Fork 0
/
tag2.html
82 lines (68 loc) · 3.65 KB
/
tag2.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame - Tag (Dimensions) Template</title>
<!-- Welcome to ZIM at http://zimjs.com - Code Interactive Media Pizzazz! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS http://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<!-- as of ZIM 4.3.0 load createjs namespace first -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>var zon = true; // true for comments from zim code</script>
<script src="https://d309knd7es5f10.cloudfront.net/zim_4.7.3.js"></script><!-- add _doc to see code -->
<!-- use zimjs.com/code/distill for minified individual functions! -->
<style>
body {background-color:#ccc;}
article {font-size:14px; font-family:verdana; padding:20px; margin:20px; color:#555; position:relative; width:60%; border:thin solid #888;}
#holder {position:relative; margin:20px 0px;}
/*
zim Frame makes a canvas tag and adds it to the div called holder
the id of canvas tag is holderCanvas (Frame adds the word Canvas to the holder id)
here we are using CSS to scale the canvas but the stage dimensions stay fixed to the values provided to Frame
*/
#holderCanvas {width:80%;}
</style>
<script>
// the tag must be loaded before we can add the canvas
window.addEventListener("DOMContentLoaded", function() {
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// "fit" sets canvas and stage to dimensions and scales to fit inside window size
// "outside" sets canvas and stage to dimensions and scales to fit outside window size
// "full" sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
var scaling = "holder"; // use the ID of a tag to place the canvas in the tag
var width = 1024; // can go higher...
var height = 768;
var color = "#d1a170";
var frame = new zim.Frame(scaling, width, height, color); // see docs for more options and info
frame.on("ready", function() {
zog("ready from ZIM Frame");
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
// put your code here (you can delete this code)
var button = new zim.Button(140, 60, "ZIM", frame.grey, frame.dark);
button.scaleTo(stage, 30); // also see zim.Layout() for more complex scaling
button.center(stage); // this adds to stage as well otherwise stage.addChild(button);
stage.update();
button.on("click", function() { // on() is like addEventListener()
zgo("http://zimjs.com/code/frame.html"); // or relative URL, target is available too
});
}); // end of ready
}); // end of window load
</script>
</head>
<body>
<article>
<h3>ZIM Frame Tag mode (with dimensions)</h3>
<p>This template shows how to place a DIMENSIONED Canvas in an HTML element with a specified on tag ID (holder in this case). ZIM Frame will make the Canvas with an id the same as the holder tag but with the word Canvas added to the end. You may choose to scale the canvas with CSS - just try to scale from big to small - like you would a picture. The stage size will be the dimensions you provide to Frame regardless of scaling (like the fit mode).</p>
<div id="holder"></div>
<p>Frame uses appendChild() to add the canvas tag to the specified element.
<p>
<a href="http://zimjs.com/code/frame.html" style="outline:none;"><img src="content/logo.png" style="width:100px; margin-bottom:-10px;"/></a>
</p>
</article>
</body>
</html>