i have a simple div element on my canvas.i introduced a setInterval function which will change its opacity after every 300 ms.When the opacity will be equal to 1 ,i want to rotate the DOM object .But the rotation effect is not triggering when opacity reaches to one.
<html>
<head>
<script src="easeljs.js"></script>
</head>
<body>
<div id="mydiv" style="width:500px;height:40px;border:1px solid black;text-align:center;color:blue;">MAD COW</div>
<canvas id="mycanvas" width="1000" height="500"></canvas>
<script>
var stage;
var domElement;
function init(){
newStage();
}
function newStage(){
stage=new createjs.Stage(document.getElementById('mycanvas'));
newDomElement();
}
function newDomElement(){
domElement=new createjs.DOMElement(mydiv);
domElement.nextX=250;
domElement.x=domElement.nextX;
domElement.y=stage.canvas.height/2;
domElement.alpha=0;
stage.addChild(domElement);
stage.update();
var interval=setInterval(tickit,300);
}
function tickit(){
if(domElement.alpha==1){
clearInterval(interval);
domElement.alpha=1;
domElement.rotation=10;
}else{
domElement.alpha+=0.1;
}
stage.update();
}
window.onload=init;
</script>
</body>
</html>
fiddle this is how i made it work
<html>
<head>
<script src="easeljs.js"></script>
</head>
<body>
<div id="mydiv" style="width:500px;height:40px;border:1px solid black;text-align:center;color:blue;">MAD COW</div>
<canvas id="mycanvas" width="1000" height="500"></canvas>
<script>
var stage;
var interval;
var domElement;
function init(){
newStage();
createjs.Ticker.setFPS(60);
createjs.Ticker.on('tick',updateit);
}
function newStage(){
stage=new createjs.Stage(document.getElementById('mycanvas'));
newDomElement();
}
function newDomElement(){
domElement=new createjs.DOMElement(mydiv);
domElement.nextX=500;
domElement.regX=250;
domElement.regY=20;
domElement.x=domElement.nextX;
domElement.y=stage.canvas.height/2;
domElement.alpha=0;
stage.addChild(domElement);
stage.update();
interval=setInterval(tickit,10);
}
function tickit(){
if(domElement.alpha<1){
domElement.alpha+=0.1;
}else{
domElement.alpha=1;
domElement.rotation+=10;
if(domElement.rotation==360){
clearInterval(interval);
}
}
stage.update();
}
function update(){
stage.update();
}
window.onload=init;
</script>
</body>
</html>
Related
I am having a hard time adding another object with tickers. I am trying to get eqn2 (i.e. 3+2=some input) to move down with the response() function. You can see in the response() function that the alert "New Question" is being called onto the screen correctly. The goal here is to have m=2 (it was at 1 before) so that the drop(2) gets called moving eqn2 down. I think the issue is that the ticker doesn't go back far enough to recognize obj[m].x = Math.random()*can.width that obj[m].y = 0.5. I don't know how to get it to work here, and any help would be much appreciated.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<button id="myBtn" onclick="response()">New Question</button>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
stage.update();
}
const quest=[];
quest[m]= document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", function(event) {
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
event.preventDefault();
}
});
const values = [];
values[m] = document.getElementById(`q${m}j`);
var stage = new createjs.Stage("gameCanvas");
var obj=[];
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
can = document.getElementById("gameCanvas");
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
function startGame() {
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(1);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>
This isn't really a ticker question. You have to redefine the variables you need in the response function before the ticker.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<div id="eqn3"> 5+2=<input type="text" id="q3j" />
</div>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var quest=[];
quest[m]= document.getElementById(`q${m}j`);
var values = [];
var stage = new createjs.Stage("gameCanvas");
var obj=[];
can = document.getElementById("gameCanvas");
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
quest[m] = document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
}
function startGame() {
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(2);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
function enterFunction(){
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
<button id="myBtn" onclick="response()">New Question</button>
</html>
i am making a basic game loop so i started with the basic cube exercise and i wrote the exemple below but it isn't working. i tried to see if there is something misspell but i could find nothing aparently.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.findElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimFrame(GameLoop);
}
requestAnimFrame(GameLoop);
</script>
</body>
</html>
You have a couple bugs here, document.findElementById does not exist, change it to document.getElementById.
requestAnimFrame should be changed to requestAnimationFrame in both instances.
With these changes your loop runs and draws a square to the screen.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>
i have a problem:
I'm working on map generator, using html canvas, the user inputs X,Y, width and height of an image.
But when i use drawImage with users input, the image doesn't fit the Canvas XY and the select height and width in pixels. Is there anything that I can use to solve this?
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
Ground was undefined. I've put it in for you.
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
<img id='ground' style='display: none' /> <!--You forgot the image!-->
</div>
</body>
<script>
function loadXml(){
var co = document.getElementById("xmlinput").value.split(','), // X, Y, H, L
canvas = document.getElementById("map"),
context = canvas.getContext("2d"),
ground = document.getElementById('ground'); //ground was undefined!
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
Your code works perfectly.Just add this to the page(create an image object)
<!DOCTYPE html />
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
var ground=new Image();
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
I've just started to learn easeljs. I have tried to create a rectangle which will follow the mouse coordinates, but it is not working. What's wrong here and how it can be fixed?
fiddle
<html>
<head>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="easeljs.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
<script>
function init(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var stage=new createjs.Stage(canvas);
var shape=new createjs.Shape();
shape.graphics.beginFill('red').drawRect(300,200,40,40);
stage.addChild(shape);
createjs.Ticker.addEventListener("tick",tick);
function tick(event){
shape.x=stage.mouseX;
shape.y=stage.mouseY;
stage.update(event);
}
}
window.onload=init;
</script>
</body>
</html>
You have set the x and y of your rectangle to be 300 and 200 respectively, so if you set those to 0, then the rectangle will start in the right place and follow the mouse as expected.
shape.graphics.beginFill('red').drawRect(0,0,40,40);
I am learning HTML5 and can't get anything to appear on the screen. It just comes up totally white. All of the code is below.
HTML:
<head>
<script src="canvas.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
Get Chrome
</canvas>
</section>
</body>
</html>
JavaScript
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'rgba(0,0,255,.5)';
canvas.font="36px Tahoma";
canvas.textAlign="end";
canvas.strokeText("omgjj", 300, 500);
}
window.addEventListener("load", doFirst, false);
Your Y coordinate is off the canvas. Change this:
canvas.strokeText("omgjj", 300, 500);
To this:
canvas.strokeText("omgjj", 300, 200);
And your text will appear: