What is wrong with this code? :S.. My canvas stays empty. Image URL is correct and image loads.
This is my engine.js file:
var canvas;
var stage;
function init()
{
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
playerImg = new Image();
playerImg.src = 'img/player/walkingbl.png';
playerImg.onload = onPlayerLoaded;
Ticker.setFPS(30);
Ticker.addListener(window);
}
function tick()
{
stage.update();
}
function onPlayerLoaded()
{
console.log(playerImg);
player = new Bitmap(playerImg);
player.x = 300;
player.y = 450;
stage.addChild(player);
console.log('Player added to stage');
}
$(document).ready(function(){
init();
});
And this is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Game Engine</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id='container'>
<canvas id='#canvas' width='1000' height='350'></canvas>
</div>
<script src="js/jquery.js"></script>
<script src="js/easel.js"></script>
<script src='js/engine.js'></script>
</body>
I'm new to the whole easel.js and never did anything with Flash or actionscript. I'm an PHP developer by heart, so this is a pretty big transition for me. The lack of documentation / tutorials / examples, make it very hard for me to learn how to use easel.js. So if you have any pointers or resources for me to check out. Please share!
This line is wrong:
<canvas id='#canvas' width='1000' height='350'></canvas>
The ID doesnt need a #. the right line is:
<canvas id='canvas' width='1000' height='350'></canvas>
but I wouldnt use the word "canvas" as an identifier, as it could be confused with the tag. Better use:
<canvas id='mycanvas' width='1000' height='350'></canvas>
and change the JS code:
canvas = document.getElementById("mycanvas");
Related
The image will load when I open the page locally, but when i go to the ip the image is not loaded. the image is in the same directory as the html file.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
setTimeout(loadImage, 1000);
};
function loadImage(){
img.src = 'image.jpg';
}
</script>
<title>Page</title>
</head>
<body onload="JavaScript:loadImage();">
<canvas id="can" width="1280" height="720" />
</body>
</html>
I really hope this solution will work for you i just edited the root of the image by adding slash symbol and changed onload="loadImage();" function
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
setTimeout(loadImage, 1000);
};
function loadImage(){
img.src = '/image.jpg';
}
</script>
<title>Page</title>
</head>
<body onload="loadImage();">
<canvas id="can" width="1280" height="720" />
</body>
</html>
Relative path in javascript usually had unexpected results for me and if it worked in one browser it was much likely to don't work in one another browser. I found that it is much convenient to store root address in a config file and make absolute path instead of relative paths.
const contentsBaseAddress = 'http://localhost:80/contents/'
function loadImage(){
img.src = contentsBaseAddress + 'images/myImage.jpg';
}
I have an html5 basic presentation that was generated using Flash 6 and CreateJS.
The presentation is basically a bunch of flash keyframes with stop(); commands.
Now, here come my questions:
1. How do I target a specific frame on this presentation, using a link, located on a different page (something like the html anchor) ?
2. is there an easy way to add some cool frames transitions between those frames, using some kind of an open source library?
I'm a designer, not a programmer, so I have only little knowledge in coding.
Any help will be appreciate.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>
CreateJS supports the use of basic actionscript by way of providing direct translations in javascript. For example, if you add the following bit of code to your timeline, the CreateJS publisher is smart enough to add a javascript call to stop the timeline at that position.
/* js
this.stop();
*/
To have a link skip to a location in the main timeline, you would need to use gotoAndPlay, or gotoAndStop depending on whether you want playback to continue. When CreateJS publishes your .fla, it creates a javascript instance of the main timeline movieclip called exportRoot. You can use this instance to manipulate the timeline via javascript.
Question 1: Changing location from another page
Using your code as an example now, notice the index.html page links to your Flash exported page (which I am calling target.html) with different hash tag locations for the frames. Also notice I have added the jquery library to your exported page, and a couple lines after the createjs.Ticker.addEventListener("tick", stage); to gotoAndStop based on the current hash, and to listen to future hash changes to gotoAndStop.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Goto frame 5
Goto frame 10
Goto frame 15
Goto frame 20
</body>
</html>
target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
//When doc loads, check if there is a hash and gotoAndStop if there is
if(document.location.hash)
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
//Use jQUery to listen to the hash change event and gotoAndStop to new location when event fires
$(window).on('hashchange', function() {
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
});
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Question 2: Transitions
As far as page transitions go, I would suggest either creating them in the timeline, and calling gotoAndPlay(FRAME_OF_THE_TRANSITION) until you start to get more comfortable with the CreateJS library to take a more object oriented approach.
I'm trying to use canvas object on iPad; the user need to draw a free curve with the finger and when he releases the finger the system must close the curve and fill it.
Actually I wrote down the following code but the problem is that it draws but it does not close the path on finger release.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=768px, maximum-scale=1.0" />
<title>sketchpad</title>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load',function(){
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'imp_02.jpg';
context.drawImage(img,0,0,600,600);
var colorPurple = "#cb3594";
context.strokeStyle=colorPurple;
context.lineWidth = 5;
context.fillStyle = "red";
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function(coors){
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function(coors){
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function(coors){
if (this.isDrawing) {
context.touchmove(coors);
context.closePath();
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event){
// get the touch coordinates
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}
// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('touchstart',draw, false);
canvas.addEventListener('touchmove',draw, false);
canvas.addEventListener('touchend',draw, false);
// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body.onTouchMove
},false); // end window.onLoad
</script>
<style type="text/css"><!--
body{margin:0;padding:0; font-family:Arial;}
#container{position:relative;}
#sketchpad{ border: 1px solid #000;}
--></style>
</head>
<body>
<div id="container">
<canvas id="sketchpad" width="766" height="944">
Sorry, your browser is not supported.
</canvas>
</div>
</body>
</html>
I don't understand what I missed.
Is there anyone who can help me..... I would appreciate a lot!!
You are fetching the touch end co-ordinates from a wrong array.
event object has one more array called changedTouches where you can find the co-ordinates of the point where the touch ended. These end co-ordinates are not in targetTouches array.
So you need
endCoordX = event.changedTouches[0].pageX;
endCoordY = event.changedTouches[0].pageY;
[modify the above code to fit into your scenario. hope you got the concept.... And seriuosly i too got stuck on the same point in the past and wasted more than an hour to know this fact....]
I have an paperscript and I need to call a function in this paperscript from my Javascript to change some values.
I know that I can write it some way, that I dont need paperscript but only javascript.
but I dont get it work.
Are there some other ways I can just export a paperscript function to javascript? or there are some other ways
I also saw something like this: but it also didnt work :-(
https://github.com/paperjs/paper.js/issues/17
--------- my current try to solve it --------
my javascript:
var paperscript = {};
my paperscript code till now:
this.someFunction = function(){ /*doSomething*/ };
//...
paper.install(window.paperscript);
the call outside of paperscript:
paperscript.someFunction(); //error, object doesnt have that function :-(
In this code (jsbin here), javascript is used to call someFunction in the paperscript, turning the rectangle red:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<script type="text/javascript">
var paperscript = {};
window.onload = function(){
paperscript.someFunction();
}
</script>
<script type="text/paperscript" canvas="p">
this.someFunction = function(){
rect1.fillColor = new Color('red');
};
var rect1 = new Path.Rectangle({
point: [0, 10],
size: [100, 100],
strokeColor: 'black'
});
paper.install(window.paperscript);
</script>
</head>
<body>
<canvas id="p" resize></canvas>
</body>
</html>
My guess is that you have not been waiting until the paperscript loads before trying to access it with your javascript. Paperscript does not (normally) load until after images have loaded; that's why this code uses window.onload to call the paperscript function.
Anyone knows how to accomplish such a thing
http://www.jarzebinowe.pl/mieszkania.html (you need to choose floor ...)
in html5?
It's about choosing the apartment, lights, etc. ..
Top how would one image was processed by HTML5 so that was the result
I'm sorry for being so strange and laconic question
Try the html map element
You probably can achieve your "drill-down" into a building more simply by using html map which will let your users click on a portion of an image and link to a new more specific image.
Here's a reference: http://www.w3schools.com/tags/tag_map.asp
[Edit with a fancier display with canvas.]
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/BbCJx/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:15px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var floorplan=document.getElementById("floorplan");
var planCtx=floorplan.getContext("2d");
planCtx.font="24px Arial";
planCtx.fillStyle="red";
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var lastWindow=-1;
var plan=new Image();
var outside=new Image();
outside.onload=function(){
plan.onload=function(){
ctx.drawImage(outside,0,0);
}
plan.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";
}
outside.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/outside.png";
var windows=[]
windows.push({top:66, left: 70, bottom:111, right:111, floorplan:0, apartment:"3a"});
windows.push({top:66, left:139, bottom:111, right:183, floorplan:0, apartment:"3b"});
windows.push({top:66, left:211, bottom:111, right:255, floorplan:0, apartment:"3c"});
windows.push({top:153, left: 70, bottom:196, right:111, floorplan:1, apartment:"2a"});
windows.push({top:153, left:139, bottom:196, right:183, floorplan:1, apartment:"2b"});
windows.push({top:153, left:211, bottom:196, right:255, floorplan:1, apartment:"2c"});
windows.push({top:239, left:139, bottom:283, right:182, floorplan:2, apartment:"1a"});
function selectWindow(x,y){
var w;
var isInWindow=false;
for(var i=0;i<windows.length;i++){
w=windows[i];
if(x>w.left && x<w.right && y>w.top && y<w.bottom){
isInWindow=true;
if(i!=lastWindow){
planCtx.clearRect(0,0,floorplan.width,floorplan.height);
planCtx.drawImage(plan,0,0);
planCtx.fillText("Apt: "+w.apartment+", Plan: "+w.floorplan,70,25);
lastWindow=i;
}
break;
}
}
if(!isInWindow){ planCtx.clearRect(0,0,floorplan.width,floorplan.height); };
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);
// Put your mousemove stuff here
selectWindow(canMouseX,canMouseY);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Mouse over a window to see it's floorplan</p>
<canvas id="canvas" width=300 height=300></canvas>
<canvas id="floorplan" width=300 height=300></canvas>
</body>
</html>