Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
.swf
file can be embedded in web pages<a href="video.avi">My video</a>
<object>
<object data="video.avi" type="video/avi"></object>
<param>
<object id="slider1" width="100" height="50"> <param name="BorderStyle" value="thick" /> <param name="MousePointer" value="hourglass" /> <param name="Enabled" value="true" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object>
name
and value
attributes tell the object what parameter this is and what value it should have<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" <param name="movie" value="movie_name.swf"/> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <!--<![endif]--> <p> Alternate content goes here. Similar to an img tag's alt text. </p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
swfobject.js
swfobject
gives us a very handy function, embedSWF()
swfobject.js
fileembedSWF()
function<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="my_id"> <p>Please download Flash!</p> </div>
swfobject.embedSWF(swfUrl, "my_id", width, height, version);
<div id="flashMovie"> <p>Please download Flash!</p> </div>
swfobject.embedSWF("resources/animator_vs_animation.swf", "flashMovie", "550", "400", "9.0.0");
Please download Flash!
canvas
element
<canvas id="mycanvas"
width="200" height="150"></canvas>
context
from which we can draw things, remember Graphics g
var ctx = document.getElementById("mycanvas").getContext("2d");
ctx.fillStyle = "#FF0000"; ctx.strokeStyle = "#00FF00"; for (var i = 0; i < 10; i++) { ctx.fillRect(i * 20, i * 10, 400 - i * 40, 200 - i * 20); ctx.strokeRect(i * 20, i * 10, 400 - i * 40, 200 - i * 20); }
canvas method | DrawingPanel analog |
---|---|
ctx.fillText(string, x, y); | g.drawString(str, x, y); |
ctx.fillRect(x, y, width, height); | g.fillRect(x, y, width, height); |
ctx.beginPath(); ctx.arc(x, y, radius, startAngle, endAngle); ctx.stroke(); |
g.drawOval(x, y, width, height); |
ctx.beginPath(); ctx.moveTo(x1, y1); ctx.arc(x2, y2); ctx.stroke(); |
g.drawLine(x1, y1, x2, y2); |
ctx.fillStyle = "#FF0000" | g.setColor(color); |
canvas
ChessHere is a working example of canvas chess.
canvas
canvas
issuestimer
setups are needed for animation
timer
goes offcanvas
element can recieve mouse events (as opposed to the things you drew inside)
canvas
method | options |
---|---|
$('#mycanvas').drawRect({...}); | x, y, width, height |
$('#mycanvas').drawPolygon({...}); | x, y, radius, sides |
$('#mycanvas').drawLine({...}); | x1, y1, x2, y2, x3, y3, ... |
$('#mycanvas').drawArc({...}); | x, y, radius, start, end |
$('#mycanvas').drawText({...}); | x, y, text |
$('#mycanvas').draw(function(ctx) { ... }); |
These options are generally accepted by all drawing methods.
option | description |
---|---|
fillStyle | color to use for interior of shape if any |
strokeStyle | color to use for the outline of the shape or for lines |
strokeWidth | thickness of lines or outlines |
fromCenter | whether coordinates are relative to center of shape |
rotate | a rotation to apply to a shape or line |
layer | whether to stick the drawing in a layer, defaults to false |
name | a name to give to a layer, presumes layer: true |
group | the group to associate this layer with, presumes layer: true |
Here is a working example of jCanvas chess.
$('#mycanvas').jCanvas({ 'fillStyle': '#ff0000', 'strokeWidth': 4, ... });
$.jCanvas();
$.jCanvas.extend
function to create your own drawing method$.jCanvas.extend({ 'name': 'drawHeart', 'props': { faded: false }, 'fn': function(ctx, p) { // Draw a heart using the DOM canvas API } }); // Use the drawHeart method $('#mycanvas').drawHeart({ 'faded': true, 'strokeWidth': 4 });
layer
option of any method, you can also give
the layer a name
or add it to some group
$('#mycanvas').drawRect({ 'layer': true, 'name': 'foo', 'group': 'bar', 'x': 0, 'y': 0, 'width': 100, 'height': 100 });
$('#mycanvas').getLayer('foo'); // Get the layer by name or index // Set the layer's options by name or index, triggers a redraw $('#mycanvas').setLayer('foo', { 'strokeStyle': 'solid', 'x': 100 }); $('#mycanvas').deleteLayer('foo'); // Delete the layer by name or index
$('#mycanvas').getLayerGroup('bar');
$('#mycanvas').deleteLayerGroup('bar');
// Set the layer's options by name or index, triggers a redraw
$('#mycanvas').setLayerGroup('bar', {
'strokeStyle': 'solid',
'x': 100
});
addLayer()
mistake// Manual layers are not drawn immediately, seemingly does nothing $('#mycanvas').addLayer({ 'method': 'drawArc' 'layer': true, 'strokeStyle': '#000000', 'radius': 30, 'x': 150, 'y': 50 }); // Solution: tell jCanvas to draw the layers now $('#mycanvas').drawLayers();
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
this
will refer to the DOM canvas object$('#mycanvas').drawRect({ 'layer': true, 'fillStyle': '#ff0000', 'x': 50, 'y': 50, 'width': 20, 'height': 20, 'click': clickHandler }); function clickHandler(layer) { layer.x += 10; }
animateLayer
method$('#mycanvas').drawRect({ 'layer': true, 'name': 'foo', 'fillStyle': '#ff0000', 'x': 50, 'y': 50, 'width': 20, 'height': 20, }).animateLayer('foo', { 'x': 250 }, 'slow');
$('#mycanvas').drawRect({ 'layer': true, 'name': 'foo', 'fillStyle': '#ff0000', 'x': 50, 'y': 50, 'width': 20, 'height': 20, 'click': clickHandler }); function clickHandler(layer) { $(this).animateLayer('foo', { 'x': 250, 'fillStyle': '#00ff00' }, 'slow'); }