I am currently developing a program called "Drive a Car" with my friend, where one car is controlled via WASD and the other is controlled with arrow keys. The problem is that the chassis color on the bottom car "function drawCar2()" seems to have a connection with the tires on the top car "function drawCar()", yet I cannot seem to find this connection. I even made two separate animation loops and tried to draw the tires in a different function. How can I fix this?
JSBin link: http://jsbin.com/yelojob/28/edit?html,css,js,output
drawCar functions:
function drawCar(x,y,angle,car1Color,wheel1Color) {
ctx.save();
ctx.translate(x,y);
ctx.rotate(angle);
//Chassis
ctx.fillStyle = car1Color;
ctx.fillRect(50, 50, 110, 25);
ctx.fill();
//Wheels
ctx.beginPath();
ctx.fillStyle = wheel1Color;
ctx.arc(75, 75, 15, 0, Math.PI, false);
ctx.arc(135, 75, 15, 0, Math.PI, false);
ctx.fill();
//Windows
ctx.fillStyle = 'lightblue';
ctx.fillRect(120,25,5,25);
ctx.fillStyle = 'darkorange'
ctx.fillRect(153,55,7,10);
ctx.fillStyle = 'darkred';
ctx.fillRect(50,58,7,10);
ctx.fillStyle = 'white';
ctx.fillRect(50,56,7,2);
ctx.restore();
}
function drawCar2(x,y,angle,car2Color,wheel2Color) {
ctx.save();
ctx.translate(x,y);
ctx.rotate(angle);
//Chassis
ctx.fillStyle = car2Color;
ctx.fillRect(50, 150, 110, 25);
ctx.fill();
//Wheels
ctx.beginPath();
ctx.fillStyle = wheel2Color;
ctx.arc(75, 175, 15, 0, Math.PI, false);
ctx.arc(135, 175, 15, 0, Math.PI, false);
ctx.fill();
//Windows
ctx.fillStyle = 'lightblue';
ctx.fillRect(120,125,5,25);
ctx.fillStyle = 'darkorange'
ctx.fillRect(153,155,7,10);
ctx.fillStyle = 'darkred';
ctx.fillRect(50,158,7,10);
ctx.fillStyle = 'white';
ctx.fillRect(50,156,7,2);
ctx.restore();
}
Related
I would like to animate a circle into a line with the radius equaling the width, and I am wondering how I can do this with an Arc? Or perhaps there is a better way?
From
To
Here's my arc:
function drawStar(x,y,size,scale,opacity,ctx){
ctx.save();
ctx.beginPath();
ctx.arc(x,y,size+scale,0,size+scale * Math.PI,false);
ctx.globalAlpha = opacity
ctx.closePath();
setFillStyle('rgb(255,237,219)',ctx);
ctx.fill()
ctx.restore();
}
I tried using ctx.scale(n,1), however it does not keep the same radius(width) and it scales the collection of arcs as a whole (zoom in effect).
Use instead a wide line-width value with "round" lineCap and stroke():
var ctx = c.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.moveTo(45 , 25);
ctx.lineTo(45.5, 25); // in IE11 this must be slightly offset
ctx.moveTo( 45, 100);
ctx.lineTo(150, 100);
ctx.stroke();
<canvas id=c></canvas>
Remember beginPath() for animation.
You can use Bezier Curves to 'transform' your arc.
There's some math involved in calculating the perfect ends of your stretched circle but I guessed and tweaked my numbers.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 20);
ctx.lineTo(100, 20);
ctx.bezierCurveTo(130, 20, 130, 60, 100, 60);
ctx.lineTo(40, 60);
ctx.bezierCurveTo(10, 60, 10, 20, 40, 20);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(40, 80);
ctx.bezierCurveTo(68, 80, 68, 120, 40, 120);
ctx.bezierCurveTo(12, 120, 12, 80, 40, 80);
ctx.fill();
ctx.stroke();
<canvas id="myCanvas"></canvas>
You could draw the left and right halves of a circle using arc, then do a fillRect in between to connect them.
Edit: To elaborate on what I said earlier:
function init() {
let canvas = document.getElementById('myCanvas');
canvas.width = 400;
canvas.height = 400;
canvas.style.width = "400px";
canvas.style.height = "400px";
let ctx = canvas.getContext("2d");
function fillArc(ctx, cx, cy, r, startDeg, endDeg) {
ctx.beginPath();
ctx.arc(cx, cy, r, startDeg * Math.PI / 180, endDeg * Math.PI / 180);
ctx.fill();
}
function fillOval(ctx, cx, cy, r, sideLength, skipFirstArc) {
if (!skipFirstArc) {
fillArc(ctx, cx, cy, r, 90, 270);
}
ctx.fillRect(cx, cy - r, sideLength, r * 2);
fillArc(ctx, cx + sideLength, cy, r, 270, 90);
}
let sideLength = 0;
ctx.fillStyle = 'red';
function animateOval() {
if (sideLength === 100) {
ctx.clearRect(0, 0, 400, 400);
}
else {
fillOval(ctx, 30, 30, 25, sideLength, sideLength > 0);
}
++sideLength;
if (sideLength > 100) {
sideLength = 0;
}
}
setInterval(animateOval, 16);
}
Here's a Plunker with the above code running: http://plnkr.co/edit/vNqoUjPKg2lqC7JtYuEb?p=preview
I have a project to do and I cannot do it until I understand how moving object inside canvas work.
I need to move one of the objects below by 50pixels to right.
Anyone willing to help me is greatly appreciated.
Meanwhile thank you very much in advance for your help or suggestions.
function canvasOneShape() {
//refers to the html canvasone id
var canvas = document.getElementById("canvasOne");
this.canvasOne.width = 945;
this.canvasOne.height = 650;
// draws the canvas in 2d
var ctx = canvas.getContext("2d");
// Set the fill colour to blue.
ctx.fillStyle = "blue"; //used like this instead of rgb due personal preference:)
// Create a filled rectangle at co-ordinates (10,10)
// with height and width set to 100.
ctx.fillRect(10, 10, 250, 330); //
// Here I draw the square
// Set the canvas up for drawing in 2D.
// Set the fill colour to blue.
ctx.fillStyle = "rgba(244, 244, 189,.5)";
ctx.fillRect(10, 50, 330, 250);
//draw my first circle
var midXone = canvas.width / 2; //x location
var midXtwo = canvas.height / 2; //y location
var radius = 60; //circle radius
ctx.beginPath();
ctx.arc(midXone, midXtwo, radius, 0, 2 * Math.PI, false);
ctx.fillStyle ="rgba(89, 192, 227,.4)";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#003300';
ctx.stroke();
//draw the second circle
var midX = canvas.width / 2.35; //x location
var midY = canvas.height / 2.35; //y location
var radius = 50; //circle radius
ctx.beginPath();
ctx.arc(midX, midY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle ="rgba(66, 244, 89,.4)";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle ="rgba(255, 244, 9,.4)";
ctx.stroke();
//draw Square with circle inside
//square
ctx.fillStyle = "rgb(222, 33, 51)";
ctx.fillRect(550, 20, 300, 300);
//circle
ctx.beginPath();
ctx.arc(700, 170, 150, 0, 2 * Math.PI, false);
ctx.fillStyle ="rgba(66, 244, 89,.4)";
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#f44242';
ctx.stroke();
//The Pacman object
var radius = 100; //circle radius
var x = 100;
var y = 500;
ctx.beginPath();
ctx.arc(120, 500, radius, 1.85 * Math.PI, .15 * Math.PI, true);
//Draw mouth
ctx.lineTo(120, 500);
ctx.closePath();
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.stroke();
//draw eye
ctx.beginPath();
ctx.arc(x + 40, y - 40, 10, 0 * Math.PI, 2 * Math.PI, true);
ctx.fillStyle = "rgb(0,0,0)";
ctx.fill();
}
there are no layers or objects on a canvas(it's just a single layer of pixels), so, if you draw something, you overwrite what's underneath it. to move something to the right, you will need to have a function to draw everything behind it, and then variables to store the location (x and y) of the objects you want to move.
then, to move it, you clear the canvas with
ctx.clearRect(0, 0,width of canvas, height height of canvas);,
call the background function to draw everything behind it again, and the redraw your object in a different location.
I am trying to make a drawing I made in the canvas change shape dynamically based on variables I pass in. what I have is that if want to change the shape of the monster or make it bigger, I have to change a lot of values to make it happen, how do I make all my number so that when I change it at 1 place, the change happens everywhere.
Here is the code on code pen
here is the html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Monster</title>
</head>
<body>
<canvas id="canvas" width="900" height="800" style="light-grey; border: 1px solid black">
Your browser does not support canvas
</canvas>
</body>
</html>
here is the javascript code
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 0;
var height = 0;
var radius = 0;
var squareLength = 450;
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#33b262';
//Translate to the center of the canvas
ctx.translate(x+ 450, y+ 350);
ctx.rotate(Math.PI /4);
ctx.translate(x+ (-(squareLength / 2)), y+ (- (squareLength / 2)));
ctx.fillRect(x + 0,y+ 0, width + squareLength, height+
squareLength);
ctx.restore();
ctx.closePath();
// eye
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x + 450, y+ 210, radius+ 75, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
// eye black filling
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x + 450, y+ 210, radius+ 17, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
//mouth
ctx.beginPath();
ctx.restore();
ctx.translate(x+ 250,y+ 100);
ctx.rect(x + 100,y+ 300, width + 200,height+ 70);
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
//left tooth
ctx.beginPath();
ctx.restore();
ctx.rect(x + 135,y+ 300, width + 30,height+ 30);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
//right tooth
ctx.beginPath();
ctx.restore();
ctx.rect(x + 237,y+ 300, width + 30,height+ 30);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
//bottom tooth
ctx.beginPath();
ctx.restore();
ctx.rect(x + 185,y+ 340, width + 30,height+ 30);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
//left leg
ctx.beginPath();
ctx.fillStyle = '#800000';
ctx.moveTo(x + 303, y+ 465);
ctx.lineTo(x + 335, y+ 433);
ctx.lineTo(x + 335, y+ 615);
ctx.lineTo(x + 303, y+ 615);
ctx.fill();
ctx.closePath();
//right leg
ctx.beginPath();
ctx.fillStyle = '#800000';
ctx.moveTo(x + 97, y+ 465);
ctx.lineTo(x + 65, y+ 433);
ctx.lineTo(x + 65, y+ 615);
ctx.lineTo(x + 97, y+ 615);
ctx.fill();
ctx.closePath();
//right shoe
ctx.fillStyle = '#330000';
ctx.beginPath();
ctx.arc(x + 319, y+ 660, radius+ 65, 0, 1 * Math.PI, true);
ctx.closePath();
ctx.fill();
//right shoe
ctx.fillStyle = '#330000';
ctx.beginPath();
ctx.arc(x + 79, y+ 660, radius+ 65, 0, 1 * Math.PI, true);
ctx.closePath();
ctx.fill();
};
You can use canvas.scale method for this kind of purposes
https://www.w3schools.com/tags/canvas_scale.asp
I wrap up my drawing code into a function and add a plus line at the beginning of it:
function drawShape(scalewidth,scaleheight) {
ctx.scale(scalewidth,scaleheight);
...
}
Then call it with some values:
drawShape(0.5, 0.5);
I have a simple animation which shows a gas meter moving from green to red. I am simply drawing, clearing and then redrawing the image on a timer to try and simulate animation. Although it kind of works, the animation lags and sometimes just goes back and forward after it should have been completed.
Heres the code:
function meter(){
requestAnimationFrame(meter);
setTimeout(function() {
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(548, 240);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
ctx.closePath();
//ctx.clearRect(500, 200, 100, 100);
}, 2000);
setTimeout(function() {
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(558, 240);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
ctx.closePath();
//ctx.clearRect(500, 200, 100, 100);
}, 2500);
setTimeout(function() {
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(568, 240);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
ctx.closePath();
//ctx.clearRect(500, 200, 100, 100);
}, 3000);
}
It looks to me that you'll have enough time to call the requestAnimationFrame function a bunch of times while the first setTimeout funtions are waiting to fire and draw stuff. This mean that you'll probably end up starting the setTimeout timers a few houndred times before the first one fires.
This is basically what you have:
function meter(){
requestAnimationFrame(meter);
setTimeout(function() {
//drawing stuff
}, 2000);
setTimeout(function() {
//drawing stuff
}, 2500);
setTimeout(function() {
//drawing stuff
}, 3000);
}
You're drawing the same thing three times with one small change. Instead, make it into 1 function with a parameter:
function meter(indicatorPosition){
//black circle
var radius = 40;
ctx.clearRect(500, 200, 100, 100);
ctx.beginPath();
ctx.arc(550, 250, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(192, 192, 192, 0.4)';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
//yellow rectangle
ctx.fillStyle = "#ffcc4a";
ctx.fillRect(525, 220, 50, 60);
//white rectangle over yellow
ctx.fillStyle = "#ffffff";
ctx.fillRect(528, 225, 44, 45);
//meter gradient background
var grd = ctx.createLinearGradient(510, 0, 670, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "red");
ctx.fillStyle = grd;
ctx.fillRect(530, 228, 40, 30);
//circle and indicator
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(550, 264, 5, 0, 2 * Math.PI, false);
ctx.moveTo(549, 260);
ctx.lineTo(indicatorPosition, 240); //this is the only variable!
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
}
Now to make it move:
if you want it to move every 0.5 seconds, it's better to use the setInterval.
var meterPosition = 548 //your starting position
var myInterval = setInterval(function() {
//each run we draw the meter
meter(meterPosition);
//Then we want to add 10 to the meter position
meterPosition+=10;
//We don't want the meter to go nuts and disappear to the right, so we'll make it reset after 3 moves
if (meterPosition > 568) {
meterPosition = 548;
}
},500);
Here's a fiddle with the code in action: http://jsfiddle.net/Niddro/7jxknwk4/
Is it possible to create a path in canvas of which the lines are stroked differently? For example so you could draw a box being green on the inside, with 4 different colored edges. I've included some code, but that does not work, because it draws the path twice (first time unfinished path, second time the whole path).
JavaScript
window.onload = function()
{
canvas = document.getElementById("canvas1");
if (canvas.getContext)
{
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.save();
ctx.moveTo(0, 0);
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.lineTo(100, 100);
ctx.stroke();
ctx.strokeStyle = "rgb(0, 0, 255)";
ctx.lineTo(200, 100);
ctx.stroke();
ctx.restore();
}
}
HTML
<canvas id = "canvas1" width = "400" height = "400">
Your browser does not support the HTML5 canvas tag.
</canvas>
I think you'll have to use two paths.
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.strokeStyle = "rgb(0, 0, 255)";
ctx.stroke();