|
JavaScript - Drawing
How would i draw a line on a page dynamically, like if i were clicking points on a map and i wanted to link them together. How could i do that?
i found this, but maybe you know of something better that would not require coordinates Similar TutorialsHi, I was wondering - how can I convert something that a user draws inside canvas? Say, they draw a square, how could I convert that to print "You have drawn a square" - this would be posted to a text file. Thanks in advance. 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;
}
I have a Canvas controller Class and a new Sprite Controller class Please note I'm not using GIF sprites these are proper programmable sprites like you get in C game engines So i have a Class that controls my Canvas and the Drawing of my Canvas what i mean by this is if you call a new instance of my Class it will create a new Canvas if you already have a canvas you can get a JSRenderEng Object from your Canvas id Now my problem lies with getting my sprites to draw them self's currently my sprites can only appear in one place in a 100x100 px canvas they load as 98x98 1top 1left so they should be a perfect mathematical square inside the canvas with a 1px border, for some reason its not drawing But here is an explination about the classes The Canvas handles the start of the drawing events by going though the sprites attached to the canvas and then calls there draw method, However i seam to have a problem with this my draw method is being fired but is not rendering on the canvas can any one spot the problem. PHP Code: this.draw = function(){ //this.updateParams(); var context = this._canvas.getContext("2d"); context.beginPath(); context.fillRect( 98, 98, 1, 1 ); context.fillStyle = "#000000"; context.fill(); context.closePath(); } Was putting the width and height and the location in the wrong order (DURRRR) 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. I'm having a problem with the <CANVAS> element in JavaScript. here's what i'm trying to do: I need 3 different canvas elements for writing a signature to. they must all 3 be visible at the same time My problem that i'm having is that i can't seem to get the code to work which will write to more than one canvas. here's my code: Code: <html>
<head>
<script language="javascript">
function WriteSignature(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 canvas1 = document.getElementById("Canvas1");
var ctx = canvas1.getContext("2d");
var PenSize = 2;
ctx.fillStyle = "Black";
ctx.fillRect (x, y, PenSize, PenSize);
event.stopPropagation();
}
function upHandler(event)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", PenHandler, true);
event.stopPropagation();
}
}
</script>
</head>
<body>
<Canvas id="Canvas1" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br><br>
<Canvas id="Canvas2" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br>
</body>
</html>
Hi Everyone I am trying to write some code to create an object in JS that contains the x,y coords for a shape i wish to draw. I create the shape, and then in a draw function I draw the shape to the screen from the object I created erlier. Trouble it is does not seem to work :S have anyone got and ideas? Code: var myShape = new newShape(200,200);
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 50);
} // init
function newShape(x,y){
this.un_X=x
this.un_Y=y
function drawAll() {
ctx.beginPath();
ctx.arc(un_X,un_Y,30,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
} // drawAll
} // newShape
function draw() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
myShape.drawAll();
} // draw
init();
Thanks in advance 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. |
|||||||