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>
Related
I have created an image drawing canvas but the drawing color can't change. maybe it's javascript set color but can't find. if anyone knows please help me. this is the demo link
http://affibe.com/erevo/
HTML Code:
`
<html class="gr__adsterra_com">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/animationFrame.js"></script>
<script type="text/javascript" src="js/nodes.js"></script>
<style>body{margin: 0; background-color: transparent;}</style>
</head>
<body data-gr-c-s-loaded="true">
<header>
<script>lowPerformance=function (){var ua=navigator.userAgent.toLowerCase(); if (ua.indexOf("iphone") !=-1 || ua.indexOf("mobile") !=-1) return true; if ($(window).width()==0) return; return ($(window).width() <=480) ? true : false;}; var ie=false; var w=window, d=document, documentElement=d.documentElement, body=d.getElementsByTagName('body')[0], height=w.innerHeight|| documentElement.clientHeight|| body.clientHeight; if (navigator.appName=='Microsoft Internet Explorer') ie=true; Nodes.multipleInit([{"post_name": "AFFIBE", "drawnImage": (height>860)?"http:\/\/affibe.com\/erevo\/images\/main\/logo_header_er.png":"http:\/\/affibe.com\/erevo\/images\/main\/logo_header_er.png", "linkTitle": "AFFIBE", "particleDensity": ie?"11":"7", "particleWidth": "0.5", "particleHeight": "0.5"}]); </script>
</header>
</body>
</html>
pixi.min.js:
http://affibe.com/erevo/js/pixi.min.js
animationFrame.js
!function(){for(var n=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16-(e-n)),o=window.setTimeout(function(){i(e+a)},a);return n=e+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}();
if i understand it the follow code help to you
var c = document.getElementById("canvas");
var ctx= c.getContext("2d");
ctx.fillStyle="#66bfff";
for example
var c = document.getElementById('canvas');
var ctx = c.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(40, 40, 40, 40);
#canvas{
border: 2px solid #333;
}
<html>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</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 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>
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 working through a book called "Beginning Facebook Game Apps Dev" and in Chapter 3 they introduce us to create code for html document.
I'm on a Mac and I use TextEdit to create the pages. At first the book gave code to draw a rectangle and a triangle. Both were fine but then I try the code rotation, it only displays the box.
I have been programming for some time now with c++ without being an expert but I know absolutely nothing yet on how the internet works. Anyway the only difference I can see between the code that works and the one that doesn't is the fact to rotate I call functions where for the rectangle I dont. Could anyone tell me what is going on please?
ps: I tried to google html 5 function not working but honestly I'm at a loss for words on how to search for this specific problem.
thank you
code working (draw rectangle)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>A simple Canvas Square</title>
<style type="text/css" media="screen">
#canvas
{
border: 1px solid #c0c0c0;
}
</style>
</head>
<body>
<canvas id="canvas" width="270" height="270"></canvas>
<script type="text/javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "gray";
context.fillRect(30, 30, 200, 200);
</script>
</body>
</html>
code not working (rotation)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>overlapping box</title>
<style type="text/css" media="screen">
#canvas
{
border: 1px solid #c0c0c0;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script type="text/javascript" charset="utf-8">
function draw(canvas Id)
{
"use strict";
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.fillStyle = "#091F5D";
context.fillRect(10, 10, 160, 150);
context.fillStyle = "rgba(255, 78, 0, 0.5)";
context.fillRect(90, 90, 160, 150);
context.fillStyle = "rgb(255, 78, 0)";
context.fillRect(170, 160, 160, 150);
}
draw('canvas');
</script>
</body>
</html>
in this line:
function draw(canvas Id)
you should not have a space between the words 'canvas' and 'Id'. Change it to:
function draw(canvasId)
canvasId is the name of the parameter (with the value passed being the id of the canvas element in which you want to draw the rectangles).