|
JavaScript - All Images Added To Canvas Shows The Same Content :(
hiya, I just have a specific question regarding to use a canvas-element with javascript
I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image. the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback. Code: function UpdateCanvas (CanvId) {
var canvIDNames = ["front", "back"]; // DOM IDs
var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
var newImg = "";
var topLeft = CanvId * 63;
var bottomRight = topLeft + 63;
var xa = 0;
var posX = 0;
var posY = 0;
var imgCode = "";
for (xa = topLeft; xa < bottomRight; xa++) {
newImg = new Image();
imgCode = regRead(xa, 1);
newImg.src = getBase64src(imgCode);
newImg.onload = function () {
currentCanvas.drawImage(newImg, posX, posY);
if (posX == 400) {
posX = 0;
posY += 90;
}
else {
posX += 50;
}
}
}
}
Similar TutorialsHi , I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=Quantity*Rate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="js/direct_invoice_table.js">
</script>
<html>
<head>
<title>Direct Invoice</title>
</head>
<body leftmargin="0" topmargin="0">
<p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
<b> Invoice</b></p>
<table id="Client_Details">
<tr>
<th>Client Name:</th>
<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
</tr>
<tr>
<th>Client Address:</th>
<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>
</tr>
<tr>
<th>Pin Code:</th>
<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>
</tr>
<tr>
<th>City/State/Country:</th>
<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
<td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td>
<td><input type="text" id="client_country" size="10" maxsize="20" /></td>
</tr>
<tr>
<th>Email Address:</th>
<td><input type="text" name="client_city" size="10" maxsize="30" /></td>
</tr>
<tr>
<th>TIN/PAN:</th>
<td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td>
</tr>
</table>
<table align="center" width = "75%">
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<th>Item No</th>
<th>Item Name</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
<th> <font color="RED">Delete</font></th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td>
<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
</tr>
</table>
<table id="totaltbl" align="right">
<tr>
<td></td>
</tr>
<tr>
<th>Vat %</th>
<td><input type="text" name="total" size="3" maxsize="3" /></td>
</tr>
<tr>
<th>Total</th>
<td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td>
</tr>
</table>
</td>
</tr>
</table>
<form action="save_entry.php" name="eval_edit" method="post" format="html">
<p>
<input type="button" value="Add Row" onclick="addRow();" />
<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />
<input type="button" value="Print" />
</p>
</form>
<p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
</p>
<p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
<p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
</body>
</html>
*************** The below is the javascript function that i wrote Code:
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight1 = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element itemname, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of itemname8. super fantastic.
// the exact same thing with a unique id
el.id = 'itemname[]'+ iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
// same thing as earlier, append our element to our freshly and clean cell
cellRight1.appendChild(el);
var cellRight2 = row.insertCell(2);
var e2 = document.createElement('input');
e2.type = 'text';
e2.id = 'description[]' + iteration;
e2.size = 20;
e2.maxsize = 100;
cellRight2.appendChild(e2);
var cellRight3 = row.insertCell(3);
var e3 = document.createElement('input');
e3.type = 'text';
e3.id = 'unitcost[]' + iteration;
e3.size = 10;
e3.maxsize = 100;
cellRight3.appendChild(e3);
var cellRight4 = row.insertCell(4);
var e4 = document.createElement('input');
e4.type = 'text';
e4.id = 'quantity[]'+ iteration;
e4.size = 4;
e4.maxsize = 100;
cellRight4.appendChild(e4);
var cellRight5 = row.insertCell(5);
var e5 = document.createElement('input');
e5.type = 'text';
e5.id = 'price[]'+ iteration;
e5.size = 10;
e5.maxsize = 100;
cellRight5.appendChild(e5);
// var cellRight7 = row.insertCell(7);
// var e7 = document.createElement('input');
// e7.type = 'CHECKBOX';
// e7.id = 'cancel[]';
// cellRight7.appendChild(e7);
var cellRight6 = row.insertCell(6);
cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
e4.onclick = dynamic_onc();
}
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("mySampleTable").deleteRow(oRow.rowIndex);
}
function countRow()
{
var Rowcount = document.getElementById('mySampleTable').rows.length;
document.eval_edit.count.value = Rowcount-1;
}
function CalculatePrice()
{
var Rowcount = document.getElementById('mySampleTable').rows.length;
document.eval_edit.count.value = Rowcount-1;
}
function onc() {
var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b);
document.getElementById('price[]').value =c;
}
function dynamic_onc()
{
alert('Jay' );
e5.value =7;
}
function Totalcal() {
var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b.value);
document.getElementById('price[]').value =c;
}
Code:
<html>
<head>
<title>test</title>
</head>
<body>
<script language = "javaScript">
var clouds = [];
var i = 0;
while(i <= 5) {
var cld = new Image();
cld.onload = function()
{
clouds.push(cld);
}
cld.src = "cloud.png";
i++;
}
document.write(clouds.length);
</script>
</body>
</html>
Where am I messing up clouds.length returns 0. Why? I know this is simple, but it will get more complex. I can search for the code, but I would like feedback as to what I'm doing wrong. This is more than likely going to be a multi stage question. More to come... ------ Also, I would like to say that this is my first post. Thanks in advance to those who reply. The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this??? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img {display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <img id="shown" src="/tools/hoe.jpg" alt="hoe"> <script> function imageView(saw) { document.getElementById("shown").src="/tools/"+saw+".jpg"; } imageView('saw'); </script> <p><input type="button" value="Saw" onclick="imageView('saw')"> </p> <p><input type="button" value="Hoe" onclick="imageView('hoe')"> </p> <p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')"> </p> </body> </html> Hey everyone, I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up. I was wondering if anyone could help me so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one. Here's my current script. Thanks already, Joey Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var ctx;
var a=0.0;
var as=true;//true a is increasing, false decreasing
var x,y;
var xs = 1;
var ys = 1;
var userWord
var myDiv, t;
var test = 0;
var ds ="";//display string
var sli =0; //spinning letter index;
function init(){
ctx = document.getElementById("myCvs").getContext("2d");
userWord = document.getElementById("userWord").value;
x=Math.floor(Math.random()*801)
y=Math.floor(Math.random()*601);
drawText();
setInterval("onEnterFrame()", 50);
myDiv = document.getElementById("myDiv");
for (i =0; i<=userWord.length;i++){
ds += "*";
}
myDiv.innerHTML =ds;
textSpin();
}
function textSpin(){
myChar = randomChar();
var newString = userWord.slice(0, sli);
newString +=myChar;
newString += ds.slice(sli+1, ds.length-1);
myDiv.innerHTML = newString;
if (myChar == userWord.charAt(sli)){sli++;}
if (sli<userWord.length){
t = setTimeout("textSpin()", 80);
}
}
function randomChar(){
var rc = Math.random()*26 + 97; //random lowercase char code
return String.fromCharCode(rc);
}
function onEnterFrame(){
if(a>1){as = false;}
if(a<0){as = true;}
if(as){
a+=0.01;
}else{
a-=0.01;
}
if(x>800){xs = -1}
if(x<0){xs=1}
if(y>600){ys = -1}
if(y<0){ys=1}
x+=10 *xs;
y+=10 *ys;
drawText();
}
function drawText(){
ctx.font = "20px Times New Roman";
//ctx.fillStyle= "rgb(256,256,256)";
//ctx.fillText("Hello", x, y);
ctx.fillStyle = randomColor();
ctx.fillText(userWord, x,y);
}
function randomColor(){
var r = Math.floor(Math.random()*150)+55;
var g = Math.floor(Math.random()*256)+150;
var b = Math.floor(Math.random()*20)+50;
var a = Math.random();
return "rgba("+ r+ ","+g+","+b+","+ a+")";
}
//function randomFont(){
// var s = Math.floor(Math.random()*100) +100;
// return s; //+ "px Times New Roman";}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color:#000;
}
#myDiv {
color:#FFF;
}
</style>
</head>
<body onLoad=""><center>
<input type="text" id="userWord" value=""> </input><br>
<input type="button" id="enterWord" value="Enter Word" onClick="init()" ></input><br><br>
<div id="myDiv" > </div>
<canvas id="myCvs" width="800px" height="600px" /><br>
<br>
</center>
</body>
</html>
I've been reading a lot of tutorials on the canvas tag and seen a lot of people using JavaScript that looks something like: ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.fill(); I understand that ctx is just the variable name and I can replace that with any variable I define, however, I'm looking for a list of all of the methods such as (moveTo, lineTo, fill etc...), as well as what they do. I hope I'm explaining this or asking this correctly. Thanks! -Mike Hi there! How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code: Code:
function GenericFigure(context) {
this.states = ["wait", "moving", "rotating", "stop"];
this.state = this.states[0];
this.ctx = context;
this.sqrW = this.sqrH = 20;
this.ctxW = 200;
this.ctxH = 350;
this.colorsO = {
red : "#ee1515",
green : "#45d137",
blue : "#17a3f3",
orange : "#ff910f",
purple : "#680077"
};
this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
this.pickColor = function() {
var num = Math.floor(Math.random() * 5);
return this.colorsA[num];
}
}
function Rectangle(context) {
this.inheritFrom = GenericFigure;
this.inheritFrom(context);
this.width = this.sqrW;
this.height = this.sqrH * 3;
this.x = this.ctxW / 2;
this.y = 0;
this.rotation = -1;
this.setRotation = function(angle) {
this.rotation = angle;
}
this.rotate = function() {
this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
this.ctx.rotate(this.rotation * Math.PI / 180);
this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
this.ctx.restore();
}
this.moveDown = function() {
this.y += 20;
this.ctx.restore();
this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
this.ctx.fillRect(this.x, this.y, this.width, this.height);
this.ctx.save();
if(this.rotation > -1) {
this.rotate();
}
l("A");
}
this.draw = function() {
this.ctx.fillStyle = this.pickColor();
this.ctx.save();
this.ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
//a tak można wywołać:
var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);
rect.draw();
var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);
And the third problem: Code: this.ctx.translate(this.x, 0); I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it? Any help will be much appreciated . I just cant wrap my mind around canvas. As far as I can tell theres no logical reason as to why the code would not work. Could someone take a look at it and possibly figure out whats wrong? I'm trying to intialize and draw a canvas with a simple image. I have the functions in a custom namespace in javascript. I am also using Jquery Code: var birdr = new Image();
var birdl = new Image();
$(document).ready(function(){
if(Modernizr.canvas){
var c = document.createElement('canvas');
LK.animLoad();
document.getElementById('backg-canvas').appendChild(c);
$('canvas').attr({'width':'500','height':'500','id':'canvas'});
var context = LK.returnCanvas();
context.drawImage(birdl, 400,487,10,10);
}
});
var LK = {
birdx: 400, //unused (lets just get it to draw the image first :\)
birdy: 487, //unused
animLoad: function(){
birdl.src = "images/bird2.png";
birdr.src = "images/bird.png";
//alert(birdl);
//alert(birdr);
},
returnCanvas: function(ca){
var b_canvas = LK.getCanvas();
var b_context = b_canvas.getContext('2d');
return b_context;
},
getCanvas: function(){
var a_canvas = document.getElementById('canvas');
//alert(a_canvas);
return a_canvas;
}
}
Any help would be greatly appreciate thanks. Btw safari web inspector indicates the canvas is getting properly created and appended to the container div. So that all works fine. So I've been making a game using html canvas. Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows) http://db.tt/ei3LlR The problem is that the shadow flickers when it is rotated. This does not happen in firefox. The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end? Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? Code: <form>
<input id="a" size=4 name="neg" placeholder="1st Screen size in inch">
<input id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
<input type="submit" value="GO!" onclick="getValue()">
</form>
</div>
<canvas id="MyCanvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
function getValue()
{
var x = document.getElementById("a").value;
var y = document.getElementById("b").value;
var aWidth;
var aHeight;
var bWidth;
var bHeight;
var c= document.getElementById("MyCanvas");
var ctx= c.getContext("2d");
ctx.fillStyle="#4AA02C";
ctx.fillRect(0,0,x,y);
}
Here, it draws canvas then disappears immediately. Hello guys! I need your help! I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is: <html> <head> <title></title> </head> <body> <canvas id='chart' width='400' height='200'> <script type="text/javascript"> var canvas = document.getElementById('chart'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 10; ctx.strokeRect(0, 0, 400, 200); ctx.moveTo(0, 100); ctx.lineTo(400, 100); ctx.stroke(); </script> </body> </html> Hey all! I have a script below that is very basic. when a user submits a blank form this popups. although i want to set the value of the input field to 'you@domain.com'. how would i add this value to this javascript so that even though there is 'you@domain.com' in the box, an error will still popup?? Thanks, Code: function validate(form_id,email) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[form_id].elements[email].value;
if(reg.test(address) == false) {
alert('Please enter a valid email address');
return false;
}
}
Hi all, I'm new to Javascript, and having an issue with getInterval. For my programming languages class we have to create a simulation of waves breaking on a shore from above. I've decided to use a canvas object and Javascript for this animation, but am getting stuck on refreshing the frames. Here is the code I have so far: Code: var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0;
function wave() {
setupShore();
var canvas = document.getElementById("canvas");
canvas.setAttribute("width",canWidth);
canvas.setAttribute("height",canHeight);
var ctx = canvas.getContext("2d");
createWave();
setInterval(update(ctx), 1000);
}
function update(ctx) {
if(waves.length != 0) {
drawWater(ctx);
drawShore(ctx);
drawWaves(ctx);
updateWaves();
}
}
function drawElement(ctx, x, y, width, height, fillcolor) {
ctx.fillStyle = fillcolor;
ctx.fillRect(x, y, width, height);
}
function setupShore() {
for(var i = 0; i <= canWidth/5; i++) {
shoreline[i] = Math.round(canHeight/5); // + Math.floor(Math.random()*101);
}
}
function createWave() {
/* Wave array setup:
[ [waveID1, [node1, node2, ..., nodeN]],
[waveID2, [node1, node2, ..., nodeN] ] */
waves.push([waveNum, []]);
for(var c = 0; c <= canWidth/5; c++){
waves[waves.length-1][1].push(canHeight);
}
waveNum = waveNum + 1;
}
function destroyWave() {
waves.shift();
}
function drawWater(ctx) {
drawElement(ctx, 0, 0, canWidth, canHeight, "#336699");
}
function drawShore(ctx) {
for(var s = 0; s <= shoreline.length; s++) {
drawElement(ctx, s*5, 0, 5, shoreline[s], "#FFCC00");
}
}
function updateWaves() {
for(var u = 0; u < waves.length; u++) {
var limit = waves[u][1].length;
for(var v = 0; v < limit; v++){
var temp = waves[u][1][v]-5;
waves[u][1][v] = temp;
if(waves[u][1][v] <= shoreline[v]){
destroyWave();
}
}
}
}
function drawWaves(ctx) {
for(var w = 0; w < waves.length; w++) {
for(var n = 0; n <= waves[w][1].length; n++){
y = waves[w][1][n];
drawElement(ctx, n*5, y, 5, 5, "Purple");
}
}
}
As you can see, the idea is that each 5-pixel wide node of the shore and wave are stored in arrays so that the position of each node can differ. The wave() function initializes all the required data, and then calls setInterval on update(). The function update() draws the water, shore, and wave, and then updates the wave position node-by-node. Ideally, setInterval would cause this to happen repeatedly, so that the wave would appear to move closer to the shore every 1000ms. However, this is not the case. It appears as though setInterval is working for one pass of update(), but fails after the first pass. You can tell that this is happening because the wave appears at its starting position, but does not continue to move. Any idea why this is happening? I read somewhere that setInterval can be broken by one-time functions, but I'm not sure. If you'd like to see what it's currently doing in a browser, I've hosted it here. Once I've got this animating properly I can continue my project, but I've hit a roadblock. Thanks in advance for your help, I'm really stuck. Marcus Hi 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>
Hello, I have this idea, but I wouldn't want to reinvent the wheel if it's already been done. I want to generate perspective grid on canvas depending on browser window size, something like this, but without textures: http://www.123rf.com/photo_2651286_a...rspective.html Do someone of you guys know if some similar script already exists? Or at least some tips on how not to end up writing a 1000 lines script (At this point I would just drop the idea)? All thoughts appreciated. P.S. even an obscure algorithm would probably suffice, 'cause the main problem I'm struggling with is diminishing size perspective calculations Hello, Codingforums. I have looked on Google for a solution, done a handful of things, and cannot get my script to draw to the page. Code: <html>
<head>
<script type="text/javascript" src="imageFuncs.js"></script>
<script type="text/javascript">
showImages = function() {
var drawingCanvas = document.getElementById("map");
// Check the element is in the DOM and the browser supports canvas
if (drawingCanvas.getContext) {
var ctx = drawingCanvas.getContext("2d");
var imageSources = new Array("map.jpg");
var images = new Array();
images = loadImages(imageSources);
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i].src;
img.onload = function(){
ctx.drawImage(img,0,0,screen.width,screen.height);
}
}
}
}
</script>
</head>
<body onload="showImages()">
<canvas id="map">Your browser does not support canvases...</canvas>
</body>
</html>
The problem appears on the ctx.drawImage(img,0,0,screen.width,screen.height); line. I read that the drawImage method will not draw the image if the images are not loaded, which is why I tried an onload event for img. When I run the code the way it is now, I get a attempt to run compile-and-go script on a cleared scope error from Firebug. When I remove the onload event, the script runs without errors. Either way, no image is drawn on the page. Any help? If it helps, this is the loadImages function that I used to get the array of loaded image objects: Code: function loadImages(sources){
var images = new Array();
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].src = sources[src];
}
return images;
}
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? not sure if this is the right place to ask canvas questions, but if it is, i'm trying to program a game like air hockey (with some twists). it works pretty well now but the table is viewed from overhead, and i would prefer to show the game from the player's perspective, as in the pic, without having to rewrite my existing code. anyone know of any js libraries or formulas which can accomplish this? I guess canvases like inline width/height instead of css width/height. This solved the issue. I'm working on a project that uses HTML5 Canvas and I'm having a strange problem with stretching. I noticed it with images and thought my math might have been wrong but then I took everything out and tried drawing a simple 100x100 square and it's completely stretched out at different proportions. The code for this (small class code)- Code: function Canvas(DOMID, F)
{
this.Frame = null;
this.width = null;
this.height = null;
this.zoom = null;
this.DOM = null;
this.ctx = null;
this.offset = null;
//Constructor
this.init = function(DOMID, F)
{
this.DOM = document.getElementById(DOMID);
this.width = $(this.DOM).width();
this.height = $(this.DOM).height();
this.ctx = this.DOM.getContext("2d");
this.zoom = 1;
this.offset = {x:0,y:0};
if(F != null)
this.setFrame(F);
this.onReady();
}
//Modifiers
this.draw = function()
{
//this.ctx.drawImage(image, 0, 0);
this.ctx.beginPath();
this.ctx.fillStyle = "#ffffff";
this.ctx.rect(0,0,100,100);
this.ctx.closePath();
this.ctx.fill();
}
this.setFrame = function(F)
{
this.Frame = F;
}
//Events
this.onReady = function(){}
this.init(DOMID, F);
}
The code calling this function is in an interval- Code: window.goToCanvas = function()
{
clearTimeout(playInterval);
playInterval = setInterval("drawCurrentCanvas()", window.playSpeed);
}
window.drawCurrentCanvas = function()
{
index = window.canvasIndex;
canvases[index].draw();
}
The page can be found here- http://micahwilliams...ewer/viewer.php I'm stumped. I hope someone can see my mistake somewhere. I have make a javascript program that uses HTML canvas and I can't get it to work in Internet Explorer. I tried using excanvas and jqcanvas but had trouble getting them to work. Does anyone know how to do this?
|
|||||||