|
JavaScript - Javascript & Html5 Canvas - Image Mask
Hi everyone,
I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed. I have attached a picture as an example because its quite hard to explain! Any help would be appreciated! Thanks, Luke Similar TutorialsHi there! I found this code, in reply to someone's problem, on this forum. I have altered it to my own needs, as it's an excellent piece of code. However, I would like it to run under HTML5. I believe I need to add "canvas" code to do the same?? I have already changed the doctype! HTML heading etc., Can anyone help? Many, many thanks!! Code: <!doctype html>
<head>
<meta charset=UTF-8" />
<title>Crazy Rally - France</title>
<script type="text/javascript">
var frames = new Array();
//load frames into array
for(var i = 1; i < 417; i++){
frames[i] = new Image(480,320);
frames[i].src = "track" + i + ".png";
}
//playback
var currentFrameNumber = 1;
var fps = 30; // frames / second
const speed = 1000 / fps; // milliseconds
//var speed = 33;
function nextFrame( )
{
document.getElementById("display").src = frames[currentFrameNumber].src;
currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
setTimeout( nextFrame, speed );
}
window.onload = nextFrame;
</script>
</head>
<body>
<img id="display" src="track1.png" width="480" height="320">
</body>
</html>
I'm trying to finish off a NotePad/SketchPad app using the HTML5 canvas element and i am getting an error when i try to PUT image data to the canvas. also the getImageData() function for CANVAS is also not working. I would like to get this working soon, because i have a really nice Prototype of a 7 inch Touch screen device i would like to install this to. Error: canvas.putImageData is not a function according to all of the HTML5 canvas tutorials i've read (including the one on Mozilla-Dev), it should be correct, but it's still throwing this error. It makes no sense at all. I remember getting a similar error to this before by using the DOM element identifier - getElementByID() where the "D" is a capital letter when it should have been a lower case. However that doesn't seem to be the case here. Can anyone help me out with this? here's my HTML & JS code The main HTML UI file Code: <html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sketch Book v1.0</title>
<script src="SketchBook.js" type="text/javascript"></script>
<script src="JSxpcom.js" language="text/javascript"></script>
</head>
<body onLoad="Init();">
<div id="SketchPageView">
<canvas id="SketchPage" width="480" height="640" style="background: #C7C1A3; position: absolute; top: 0px; left: 0px;" onmousedown="Draw(this, event);"></canvas>
</div>
<div id="Options" style="position: absolute; visibility: hidden; top: 100px; left: 50px;">
<table cellwidth="100" border="0" cellpadding="0" cellspacing="0" height="50">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"><center><b>Options</b></center><img src="./Image/delete.png" style="position:absolute; top: 2px; left: 150px; height: 18; width: 18;" onClick="HideOptions();"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>
<td bgcolor="#bce0f8">
<div style="border: 1px solid black;">
<table>
<tbody><tr>
<td><center>Pen Size</center></td><td><center>Color</center></td>
</tr>
<tr>
<td>
<select id="GetPenSize" onchange="UpdatePenSize();">
<option value="1">1 px</option>
<option value="2">2 px</option>
<option value="3">3 px</option>
<option value="4">4 px</option>
<option value="5">5 px</option>
</select>
</td>
<td>
<select id="GetPenColor" onchange="UpdatePenColor();">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Brown">Brown</option>
</select>
</td>
</tr>
<tr>
<td><input value="Restore" onclick="RestoreData();" type="button"></td><td><input value="Backup" onclick="BackupData();" type="button"></td>
</tr>
<tr>
<td><input value="Encrypt" onclick="EncryptData();" type="button"></td><td><input value="DeCrypt" onclick="DecryptData();" type="button"></td>
</tr>
</tbody></table>
</div>
</td>
<td bgcolor="#bce0f8"></td></tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td><td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</div>
<table id="UI" style="position: absolute; top: 0px; left: 412px; visibility: visible;" border="0" cellpadding="0" cellspacing="0" width="40">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>
<td bgcolor="#bce0f8" height="600">
<img src="./Image/up.png" style="width: 30px; height: 30px;" onclick="NextNote('up');"><br><br><br><br>
<img src="./Image/plus.png" style="width: 30px; height: 30px;" onclick="NewSketch();"><br><br><br><br>
<img src="./Image/save.png" style="width: 30px; height: 30px;" onclick="SaveSketch();"><br><br><br><br>
<img src="./Image/clear.png" style="width: 30px; height: 30px;" onclick="ClearSketch();"><br><br><br><br>
<img src="./Image/delete.png" style="width: 30px; height: 30px;" onclick="DeleteSketch();"><br><br><br><br>
<img src="./Image/gear.png" style="width: 30px; height: 30px;" onclick="ShowOptions();"><br><br>
<img src="./Image/down.png" style="width: 30px; height: 30px;" onclick="NextNote('down');">
</td>
<td bgcolor="#bce0f8"></td> </tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td> <td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</body></html>
The JS file (has the CANVAS manipulation code in it) Code: var SketchDataFolder = "c:\\";
var PenSize = "3";
var PenShape = "Circle";
var PenColor = "Black";
var LoadFile = "";
var UIstatus = "visible";
var CurrentNote = 0;
var BGcolor = "#C7C1A3";
var DataPath = "\Data\\";
var FileList = [];
var SystemPath;
var UIstatus = "visible";
var Server = "localhost";
document.onkeyup = ToggleUI;
function Init()
{
// Get the System Path
GetSystemPath("SketchBook.html");
// Load All Filenames of the DataPath directory into an array
GetFileList(SystemPath + DataPath, FileList);
//Load the first Note onto the canvas
// if there are no notes in the directory, don't try to load anything
if(FileList.length > 0)
{
var NxtNote = LoadFromDisk(FileList[CurrentNote]);
// Load the image data onto the canvas
var canvas = document.getElementById("SketchPage");
var context = canvas.getContext("2d");
canvas.putImageData(NxtNote , 0 , 0 );
}
}
function HideOptions()
{
document.getElementById("Options").style.visibility = "hidden";
}
function ToggleUI(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
var KeyValue = 18;
// Use a key to hide the toolbars so that most of the screen is used for the UI
if(KeyID == KeyValue)
{
if(UIstatus == "visible")
{
UIstatus = "hidden";
document.getElementById("UI").style.visibility = "hidden";
return;
}
if(UIstatus == "hidden")
{
UIstatus = "visible";
document.getElementById("UI").style.visibility = "visible";
}
}
}
function ShowOptions()
{
document.getElementById("Options").style.visibility = "visible";
}
function UpdatePenSize()
{
PenSize = document.getElementById('GetPenSize').value;
}
function UpdatePenShape()
{
PenShape = document.getElementById('GetPenShape').value;
}
function UpdatePenColor()
{
PenColor = document.getElementById('GetPenColor').value;
}
function Draw(element, event)
{
document.addEventListener("mousemove", PenHandler, true);
document.addEventListener("mouseup", upHandler, true);
event.stopPropagation();
event.preventDefault();
function PenHandler(event)
{
var x = event.clientX;
var y = event.clientY;
// mouse event goes here
var canvas = document.getElementById("SketchPage");
var ctx = canvas.getContext("2d");
if (PenShape ="Circle")
{
// This draws a circle
ctx.fillStyle = PenColor;
ctx.beginPath();
ctx.arc(x, y, PenSize, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
event.stopPropagation();
}
function upHandler(event)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", PenHandler, true);
event.stopPropagation();
}
}
function SaveSketch()
{
// Get the current file name
var FileName = SystemPath + DataPath + CurrentNote + ".img";
var canvas = document.getElementById("SketchPage");
var context = canvas.getContext("2d");
var ImgData = context.getImageData(0, 0, canvas.width, canvas.height);
alert(ImgData);
// Write the PNG file to the disk
SaveToDisk(FileName, ImageData);
}
function NextNote(Direction)
{
if(Direction == "up")
{
// Display the previoius note
CurrentNote--;
// Make sure you don't incrimnet to a non-existant note
if(CurrentNote <= 0)
{
CurrentNote = FileList.length;
}
var NxtNote = LoadFromDisk(SystemPath + DataPath + FileList[CurrentNote]);
// Load the image data onto the canvas
var canvas = document.getElementById("SketchPage");
var context = canvas.getContext("2d");
canvas.putImageData(NxtNote , 0 , 0 );
return;
}
if(Direction == "down")
{
//Display the Next note
CurrentNote++;
// Make sure you don't incrimnet to a non-existant note
if(CurrentNote > FileList.length)
{
CurrentNote = 0;
}
var NxtNote = LoadFromDisk(SystemPath + DataPath + FileList[CurrentNote]);
// Load the image data onto the canvas
var canvas = document.getElementById("SketchPage");
var context = canvas.getContext("2d");
canvas.putImageData(NxtNote , 0 , 0 );
return;
}
}
function DeleteNote()
{
// Delete The current note
DeleteFile(SystemPath + DataPath + FileList[CurrentNote]);
// Reload the Directory List
// Re-Dim the FileList Array
FileList.length = 0;
GetFileList(SystemPath + DataPath, FileList);
// Load The Previous Note
// Display the previoius note
CurrentNote--;
// Make sure you don't incrimnet to a non-existant note
if(CurrentNote <= 0)
{
CurrentNote = FileList.length;
}
var NxtNote = LoadFromDisk(FileList[CurrentNote]);
// Load the image data onto the canvas
var canvas = document.getElementById("SketchPage");
var context = canvas.getContext("2d");
canvas.putImageData(NxtNote , 0 , 0 );
return;
}
function AddNote()
{
// Add a note to the notebook and at the end of the File List
// **** Later this function should be modified to be an INSERT function rather than just an add
// Just incase the user needs to go back an edit and add more things to their notebook
}
function ClearSketch()
{
// Clear the contents of the Canvas
//Draw a rectangle that covers the canvas
var canvas = document.getElementById("SketchPage");
var ctx = canvas.getContext("2d");
ctx.fillStyle = BGcolor;
ctx.fillRect (0, 0, canvas.width, canvas.height);
}
function Crypt(method)
{
// This function will Encrypt or Decrypt All the NoteData
if(method == "encrypt")
{
return;
}
if(method == "decrypt")
{
return;
}
}
function Archive(method)
{
// This function will Restore or Backup all NoteData to a network resource
if(method == "restore")
{
return;
}
if(method == "backup")
{
return;
}
}
// ******************** These are the XPCOM Functions ************************
function GetSystemPath(ApplicationName)
{
// This function should Detect the system directory of the app
// and return that string as the SystemPath variable
// You must supply the filename of the HTML file that it is being called from
// I suppose later i could add the code to detect the HTML's actual file name
// It's on the ToDo List...
var GetSysPath = self.location;
GetSysPath = GetSysPath + "";
Get = GetSysPath.replace("file:///" , "");
Get = Get.replace(/\//g , "\\");
Get = Get.replace(ApplicationName, "");
SystemPath = Get;
return SystemPath;
}
function DeleteFile(FileName)
{
// Delete a local file
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
if (aFile instanceof Components.interfaces.nsILocalFile)
{
aFile.initWithPath(FileName);
aFile.remove(false);
}
}
function GetFileList(Directory, FileList)
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var _nsILocalFile = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
// initialize path to work with
_nsILocalFile.initWithPath(Directory);
// get file interface implemenation
// this means that an XPCOM Class can implement multiple interface
var lv_oFile = _nsILocalFile.QueryInterface(Components.interfaces.nsIFile);
var lv_oEntries = lv_oFile.directoryEntries;
while(lv_oEntries.hasMoreElements())
{
var lv_cFile = lv_oEntries.getNext()
.QueryInterface(Components.interfaces.nsIFile).path;
FileList.push(lv_cFile);
}
}
function SaveToDisk(filepath, content) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Permission to save file was denied.");
}
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( filepath );
if ( file.exists() == false ) {
file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
}
var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
.createInstance( Components.interfaces.nsIFileOutputStream );
outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
var output = content;
var result = outputStream.write( output, output.length );
outputStream.close();
}
function LoadFromDisk(filePath)
{
if(window.Components)
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(filePath);
if (!file.exists())
return(null);
var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
inputStream.init(file, 0x01, 00004, null);
var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
sInputStream.init(inputStream);
return(sInputStream.read(sInputStream.available()));
}
catch(e)
{
//alert("Exception while attempting to load\n\n" + e);
return(false);
}
return(null);
}
I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari. Here is a picture of what it renders in Chrome: What is is supposed to look like and is in Firefox: Here is my set up for drawing on the canvas: Code: var canvas = null;
var c2d = null;
//...
window.onload = init;
function init() {
canvas = document.getElementById('canvas');
c2d = canvas.getContext('2d');
setInterval( step, 1000/FPS );
//...
//c2d.setTransform(1,0,0,1,0,0); // reset to identity <--Do I need this?
}
Below is the game loop function. Am I clearing the canvas correctly because it does not clear the screen? Also am I using the save and restore functions correctly? Each asteroid and player drawn is at a different of position and rotation so am I doing it correct to draw them? Code: function step() {
//...
canvas.width = canvas.width; //clear canvas PROBLEM
//Things I have tried:
//canvas.height = canvas.height; //clear canvas
//c2d.clearRect(0, 0, canvas.width, canvas.height);
for (u=0;u<asteroids.length;u++) {
c2d.save();
asteroids[u].draw();
c2d.restore();
}
c2d.save();
player.draw();
c2d.restore();
c2d.strokeStyle = "#000000";
c2d.stroke();
}
Below is the Asteroid and Player drawing functions. The Asteroid is a polygon and the Player is a triangle. Both rotate and are draw correctly but should I be passing a reference to the drawing reference? Code: function Asteroid_draw() {
c2d.translate( this.x, this.y );
c2d.rotate(this.angle);
for (i=0;i<this.points_x.length-1;i++) {
c2d.moveTo(this.points_x[i],this.points_y[i]);
c2d.lineTo(this.points_x[i+1],this.points_y[i+1]);
}
c2d.moveTo(this.points_x[0],this.points_y[0]);
c2d.lineTo(this.points_x[this.points_x.length-1],this.points_y[this.points_x.length-1]);
}
function Player_draw() {
c2d.translate( this.x, this.y );
c2d.rotate(this.angle);
//Points {0,-12}{7,5}{-7,5}
c2d.moveTo(0,-12);
c2d.lineTo(7,5);
c2d.moveTo(7,5);
c2d.lineTo(-7,5);
c2d.moveTo(-7,5);
c2d.lineTo(0,-12);
}
Any help is appreciated. Hello, I'm new here so.. hi! You'll probably be seeing me a lot. Anyways here's my questions. I am trying to get a function to draw 5 randomly sized and colored rectangles nested within each other. Meaning each rectangle should not go outside the boundaries of the rectangle it is in. The color thing I've got down in a randomColor() function. It's the nesting rectangles inside rectangles that is confusing me (hense me being up for the past 4 hours trying to understand it) I started out with very simple code just making 5 rectangles of reducing sizes nested in each other, then added the Math.random to randomize all the sizes. Now I'm at this point and have lost my way. Please help, or maybe there is just an easier way. I added a bunch of comments in my code so maybe you'll understand what I'm trying to do. Code: function rect() { // rectangle generator
autoctx.clearRect(0, 0, 400, 400); // clear canvas
// declare variables
var x;
var y;
var width;
var height;
var i = 0; // counter
// create random x,y coordinates
x = Math.round(Math.random() * 100);
y = Math.round(Math.random() * 100);
do { // create random size rectangle
width = Math.round(Math.random() * 400);
height = Math.round(Math.random() * 400);
} while (width < 100 || height < 100); // make sure rectangle is big enough
autoctx.fillStyle = randomColor(); // Runs random color generator
autoctx.fillRect(x, y, width, height); // fill first rectangle
do {
x += (Math.round(Math.random() * 15)); // choose new random coordinates within previous rectangle
y += (Math.round(Math.random() * 15)); // choose new random coordinates within previous rectangle
//*********** KEEPS RECTANGLE HEIGHT AND WIDTHS FROM BEING A NEGATIVE NUMBER ***********//
do { //*** WIDTH TESTER ***// validates width to be within previous rectangles width
var testW = 0; // new width tester variable
testW = width - (Math.round(Math.random() * (2 * x))); // store test width
if (testW > 0) {
width = testW; // if test width > 0 store in width
}
} while (testW < 0); // if test width < 0 continue loop
do { //*** HEIGHT TESTER ***// validates height to be within previous rectangles height
var testH = 0; // create height testing variable
testH = height - (Math.round(Math.random() * (2 * y))); // calculate new test height
if (testH > 0) { // if test height is > 0
height = testH; // store as height
}
} while (testH < 0); // if test height < 0 try again
//*** Fills final rectangle values ***//
autoctx.fillStyle = randomColor(); // Runs random color generator
autoctx.fillRect(x, y, width, height);
i++; // add 1 to counter
} while (i < 4); // kick out of loop after the 5th rectangle
}
thanks guys I hope I'm not too confusing or anything, any help would be greatly appreciated! I am learning Javascript and HTML5... I am trying to create a slideshow using canvas with text display of what the current image is. I have done this without canvas but I want to use canvas this time. My idea involves using the file name as the text display. Here is my working slideshow.. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Slide Show</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">
var imagePaths = [
"images/Summer.jpg",
"images/Spring.jpg",
"images/Fall.jpg",
"images/Winter.jpg",
"images/Puppies.jpg",
"images/Duck.jpg"
];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
window.onload = function () {
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','480');
img.setAttribute('height','360');
}
function nextImage() {
currentImage++; if (currentImage >= imagePaths.length) currentImage = 0;
img.setAttribute('src',imagePaths[currentImage]);
img.onload = function() {
showCanvasCtx.drawImage(img,0,0,480,360);
}
}
function prevImage() {
currentImage--; if (currentImage < 0) currentImage = imagePaths.length-1;
img.setAttribute('src',imagePaths[currentImage]);
img.onload = function() {
showCanvasCtx.drawImage(img,0,0,480,360);
}
}
</script>
<style type="text/css">
<!--
#showCanvas {
background-image: url(images/Summer.jpg);
}
#center {
height: 360px;
width: 491px;
float: right;
}
#slideArea {
height: 381px;
width: 600px;
margin-right: auto;
margin-left: auto;
}
#right {
height: 361px;
width: 52px;
float: right;
}
#left {
float: left;
height: 360px;
width: 52px;
}
#nxtBtn {
width: 57px;
height: 57px;
position: relative;
top: 120px;
}
#bkBtn {
height: 57px;
width: 57px;
position: relative;
top: 120px;
}
#displayText {
width: 600px;
height: 20px;
float: left;
text-align: center;
}
-->
</style>
</head>
<body>
<br />
<div id="slideArea">
<div id="right">
<a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
</div>
<div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></div>
<div id="center">
<center>
<canvas id="showCanvas" width="480" height="360" >
Your browser does not support the canvas tag.
<br />
Please upgrade your browser
</canvas>
</center>
</div>
<div id="displayText">Display Text</div>
</div>
</body>
</html>
This is what I came up with so far but it doesn't work. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Slide Show</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">
////added this code to be able to pull the display text from "imageName"
var imagePath = ["images/];
var imageName = [
"Summer",
"Spring",
"Fall",
"Winter",
"Puppies",
"Duck"
];
var imagePaths = imagePath + imageName + ".jpg";
/////////////////////
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
window.onload = function () {
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','480');
img.setAttribute('height','360');
}
function nextImage() {
currentImage++; if (currentImage >= imagePaths.length) currentImage = 0;
img.setAttribute('src',imagePaths[currentImage]);
img.onload = function() {
showCanvasCtx.drawImage(img,0,0,480,360);
}
}
function prevImage() {
currentImage--; if (currentImage < 0) currentImage = imagePaths.length-1;
img.setAttribute('src',imagePaths[currentImage]);
img.onload = function() {
showCanvasCtx.drawImage(img,0,0,480,360);
}
}
</script>
<style type="text/css">
<!--
#showCanvas {
background-image: url(images/Summer.jpg);
}
#center {
height: 360px;
width: 491px;
float: right;
}
#slideArea {
height: 381px;
width: 600px;
margin-right: auto;
margin-left: auto;
}
#right {
height: 361px;
width: 52px;
float: right;
}
#left {
float: left;
height: 360px;
width: 52px;
}
#nxtBtn {
width: 57px;
height: 57px;
position: relative;
top: 120px;
}
#bkBtn {
height: 57px;
width: 57px;
position: relative;
top: 120px;
}
#displayText {
width: 600px;
height: 20px;
float: left;
text-align: center;
}
-->
</style>
</head>
<body>
<br />
<div id="slideArea">
<div id="right">
<a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
</div>
<div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></div>
<div id="center">
<center>
<canvas id="showCanvas" width="480" height="360" >
Your browser does not support the canvas tag.
<br />
Please upgrade your browser
</canvas>
</center>
</div>
<div id="displayText">Display Text</div>
</div>
</body>
</htm>
Any help would be greatly appreciated. I am very new to javascript(and these forums) and I am teaching my self to use the canvas element. I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code:
function RPGanimation(options)
{
this.initcanvas(options);
this.initbackground(options);
};
RPGanimation.prototype = {
initbackground: function(options){
this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();
},
initcanvas:function(options){
this.canvas = document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}
};
I create the object in a webpage with the canvas element created just before that script tag... So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes. What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? I found a great little starfield script made with javascript and canvas3d. however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script: http://seb.ly/demos/canvas3d/canvas3d2.html how do i get a background image in that? or is it impossible? i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield. i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas? ( left side is the source) Hello all; I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code: Code: <body>
<canvas id="worldscreen" class="map"></canvas><br />
<script type="text/javascript">
function loadImages(arrow, call) {
var images = {};
var loaded = 0;
var num = 0;
for (var src in arrow) {
num++;
}
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
call(images);
}
};
images[src].src = arrow[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("worldscreen").getContext("2d");
var arrow = {
top: "sideQUEST/images/arrow-top.png",
right: "sideQUEST/images/arrow-right.png",
bottom: "sideQUEST/images/arrow-bottom.png",
left: "sideQUEST/images/arrow-left.png",
};
loadImages(arrow, function(images) {
canvas.drawImage(images.top, 100, 18);
canvas.drawImage(images.right, 215, 36);
canvas.drawImage(images.bottom, 100, 115);
canvas.drawImage(images.left, 36, 36);
});
};
</script>
</body>
You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you. Hello, I'm working on a small project and I'm new to javascript, basically on my canvas I have drawn a fault tree diagram that look like this View image: zoomzoom, what I want is too zoom in/out using the mouse wheel, and use mouse button to pan it to left/right. Don't really know where to stand so any advice would be helpful.
Hello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] Hello, I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on. Thanks for help! Here's a draft of what it looks like so far in the front end with my grids still in place: HTML file: Code: <div id="slider" class="span-24 last">
<div id="slide2Left"> ←</div>
<div id="slideFrame">
<div id="slideBoard">
<!-- the slides -->
<div class="slidePoint">
Slide 1 Goes Here
</div>
<div class="slidePoint">
Slide 2 Goes Here
</div>
<div class="slidePoint">
Slide 3 Goes Here
</div>
<!-- end slideBoard -->
</div>
<div id="slideReference"></div>
<!-- end slideFrame -->
</div>
<div id="slide2Right" class="last"> →</div>
<!-- end slider section -->
</div>
Javascript code Code: // JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();
var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;
//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;
//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});
$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});
//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});
CSS Code Code: /* CSS Document */
#slider {
position: relative;
margin: 79px 0 50px 0;
height: 500px;
padding-bottom: 50px;
border-bottom: 1px solid #9B9B9B;
}
#slideFrame {
width:870px;
left: 40px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#test {
width:30px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#slideBoard {
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:400px;
margin:0px;
padding:0px;
background: #ccc;
opacity: .3;
}
.slidePoint {
width:870px;
min-height:400px;
height:410px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p {
padding:5px;
}
#slide2Left, #slide2Right{
position:absolute;
top: 200px;
bottom: 5px;
cursor:pointer;
width:20px;
height:20px;
color:#9B9B9B;
border:#9B9B9B solid 1px;
border-radius: 5px;
padding:3px;
text-align:center;
display: inline-block;
}
#slide2Right{
left: 920px;
}
#slideReference {
position:absolute;
width: 770px;
min-height:10px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber {
border-radius: 2px;
background:#929292;
color:#ffffff;
cursor:pointer;
display:inline-block;
padding:3px;
margin:3px;
text-align:center;
min-height:15px;
min-width:15px;
}
I am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration
- returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered
This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks I have a code that will randomly select a div from a list and inside of that div i want there to be a sound file. How would I use html5 and javascript to make it so that when a user clicks a button it would play whatever sound was associated with that button? Code: <div id="randomdiv1" class="article_example_div"> <embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed> </div> Okay, so I have a canvas, and I want the user to be able to copy an image url and paste it into an input box, that will then set it as the canvas background image. Does anyone know how I can do this? I was thinking about using the OnChange method in the text input, but I cannot find any help with that online. My current Canvas Background is (In <head><script>) Code: var imgObg = new Image(); imageObj.src = "images/bg.png"; And my text input is Code: <form name="input" action="" method="get"> <input type="text" id="textboxBG" onchange="??" /> <input type="submit" value="Submit" /> </form> If you need more code, or would like to help me out more in depth, I would gladly paypal you a little money. I know this can't be too difficult! I REALLY want this done! Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question. I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance: Code: <table>
<tr>
<td onmouseout="window.alert('you moused out of td');">
<img src="image0.gif" style="height:50px; width:50px;" />
</td>
</tr>
</table>
In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element. I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You. Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right. I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he http://www.storiesinflight.com/html5/audio.html I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome. Hi there, I am just writing to see if I can receive some help regarding an issue I'm having? I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such. I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/ Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page) Code: // ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;
// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
if (isPlaying !== false) {
var nextNote = 60000 / curTempo / 4;
// Turn off all lights on the tracker's row
$("#tracker li.track").removeClass("active");
// Light up the tracker on the current track
$("#tracker li.track.col_" + curNote).addClass("active");
// Find each active note, play it
var tmpAudio;
$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
tmpAudio = document.getElementById($(this).data('sound_id'));
if (!tmpAudio.paused) {
// Pause and reset it
tmpAudio.pause();
tmpAudio.currentTime = 0.0;
}
tmpAudio.play();
});
// Move the track forward
curNote = (curNote + 1) % 16;
} // if (isPlaying)
} // playTune
// Make a new hash
function buildHash() {
// Start it
var newhash = '';
// For each track, check and add in a 0/1 as appropriate
$(".playBar[id^=control] li.track").each(function(i){
newhash += $(this).is('.active') ? '1' : '0';
});
// Separate it
newhash += '|';
// Now, toss in the note
newhash += $('#temposlider').slider('value');
// Check and see if we really need to update
if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash
// Read in our hash
function parseHash() {
if (location.hash.length > 0) {
// Split it up, work it out, removing the actual hashmark
var pieces = location.hash.substring(1).split('|');
// Set the lights
var lights = pieces[0];
$(".playBar[id^=control] li.track").each(function(i){
// Make sure we haven't exceeded
if (i >= lights.length) return false;
// Check our location, turn on class if need be
if (lights.charAt(i) == '1') {
$(this).addClass('active');
}
});
// Set the tempo
if (typeof pieces[1] !== 'undefined') {
$('#temposlider').slider('value', parseInt(pieces[1]));
$('#tempovalue').innerHTML = pieces[1];
curTempo = parseInt(pieces[1]);
}
}
} // parseHash
// Clear it!
function clearAll() {
$(".playBar[id^=control] li.active").removeClass('active');
}
// Run on DOM ready
$(document).ready(function(){
// Process each of the audio items, creating a playlist sort of setup
$("audio").each(function(i){
// Make a self reference for ease of use in click events
var self = this;
// Make a sub-list for our control
var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
$ul.append('<li class="header">' + this.title + '</li>');
// Add 16 list items!
for (j = 0; j < 16; j++) {
var $li =
$('<li class="track col_'+j+'">'+self.id+'</li>')
.click(function(){
$(this).toggleClass('active');
buildHash();
})
.data('sound_id', self.id);
$ul.append($li);
} // for (i = 0; i < 16; i++)
// Append it up
$('<li>').append($ul).appendTo('#lights');
});
// Bind up a click for our button
$("#soundstart").click(function(){
if (isPlaying === false) {
// Start the playing!
curNote = 0;
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
// Change our display
this.innerHTML = "Stop";
} else {
clearInterval(isPlaying);
isPlaying = false;
$("#tracker li.track").removeClass("active");
$("audio").each(function(){
this.pause();
this.currentTime = 0.0;
});
this.innerHTML = "Play";
}
});
$('#clearall').click(clearAll);
$('#reload').click(parseHash);
// ===== Misc =====
// Build or read the hash
if (location.hash == '') {
// I was building this at load - but now, no, just to be safe
//buildHash();
} else {
parseHash();
}
// Show our value, now that we've built off of the hash
$('#tempovalue').html(curTempo);
// Make our tempo slider
$('#temposlider').slider({
'value': curTempo,
'min': 30,
'max': 170,
'step': 2,
'slide': function(e, ui) {
curTempo = ui.value;
$('#tempovalue').html(curTempo);
if (isPlaying !== false) {
clearInterval(isPlaying);
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
}
},
'stop': function(e, ui) {
buildHash();
}
});
});
On all my html 5 pages of http://www.countyfairgrounds.net I have a drop down javascript menu for selecting a state. The thing has worked for years fine. However in switching to html5 the validator will not validate it. The are saying the option tag is obsolete. First I don't java, I do html5 and css3 currently. Ca anyonepoint me to a script dropdown that I can cut and paste - that will validate?
|
|||||||