So I'm trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can't figure out how to call JavaScript in a way that repeats every 60 seconds.
Here's what I got so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
</script>
</head>
<body onLoad="setTimeout(update(), 0);">
<canvas id="screen1" width="500" height="500"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
update();
setInterval ( update, 60000 );
</script>
</body>
</html>
1000ms = 1 second, 60000 = 60 seconds.
Using setTimeout, instead of setInterval, allows you to stop the animation with clearTimeout and the use of a variable.
(edit: this whole thing doesn't work in IE, but the setTimeout - clearTimeout combo itself should... also changed the onload and onclick events)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update()
{
draw();
x = x + 5;
// For one minute, you would use 60000 instead of 100.
// 100 is so you can actually see it move.
myToggle = setTimeout(update, 100);
};
function draw()
{
var canvas = document.getElementById('screen1');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
};
function stop()
{
clearTimeout(myToggle);
};
window.onload = function()
{
document.getElementById("stop").onclick = function() { stop(); };
document.getElementById("start").onclick = function() { update(); };
update();
};
</script>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas><br/>
<input id="stop" type="button" value="Stop" /><br/>
<input id="start" type="button" value="Start" />
</body>
</html>
Related
It's my first question here. I just learn canvas in JavaScript and I found a problem while adding the speed. I want to stop the rectangle if its x exceeds the width of the canvas. I am just a beginner, so please help me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">Your browser doesn't support canvas</canvas>
<script>
var canvas = document.getElementById('canvas');
var cnxt = canvas.getContext('2d');
x = 0;
y = 50;
var t;
function draw(){
cnxt.clearRect(0,0,400,400);
cnxt.beginPath();
cnxt.rect(x,y,25,25);
cnxt.fillStyle = 'red';
cnxt.fill();
var timePassed = (performance.now()-t)/1000;
var fps = Math.round(1/ timePassed);
let speed = 100;
cnxt.font = '25px Arial';
cnxt.fillStyle = 'black';
cnxt.fillText("FPS: " + fps, 20,30);
t = performance.now();
x += (speed * timePassed);
if (x >= 400 - 25){
speed = 0;
}
window.requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
I'm trying to clear one line by drawing another one on top of it on HTML canvas. But the second line becomes semi transparent for some unknown to me reason.
index.html
<!DOCTYPE html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<html>
<body onload = "onload()">
<canvas id = "canvas" style="border: solid 1px; width: 200px; height: 200px;"></canvas>
</body>
</html>
scripts.js
var canvas,ctx;
const onload = () =>{
canvas = document.querySelector("#canvas")
ctx = canvas.getContext('2d')
drawLine("#ff0000")
drawLine("#ffffff")
}
const drawLine = (color) =>{
ctx.beginPath()
ctx.strokeStyle = color
ctx.moveTo(0,0)
ctx.lineTo(200,200)
ctx.stroke()
ctx.closePath()
}
var canvas,ctx;
const onload = () =>{
canvas = document.querySelector("#canvas")
ctx = canvas.getContext('2d')
drawLine("#ff0000")
drawLine("#ffffff")
}
const drawLine = (color) =>{
ctx.beginPath()
ctx.strokeStyle = color
ctx.moveTo(0,0)
ctx.lineTo(200,200)
ctx.stroke()
ctx.closePath()
}
<!DOCTYPE html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<html>
<body onload = "onload()">
<canvas id = "canvas" style="border: solid 1px; width: 200px; height: 200px;"></canvas>
</body>
</html>
I want to add 10 to the position of the ball, but it adds position to the duplicated shape. I tried to make a separate function but it did not work.
HTML5 Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="Game" width="800" height="600" style="border: 1px solid #d3d3d3;
background-color: #f1f1f1;"></canvas>
<script src="Game.js"></script>
</body>
</html>
Javascript Code:
var GameCanvas = GameCanvas = document.getElementById("Game");
var GameCtx = GameCtx = GameCanvas.getContext("2d");;
var BallSprite = 50;
window.onload = function () {
setInterval(HoldSprites, 100);
}
function HoldSprites() {
BallSprite = BallSprite + 10;
GameCtx.beginPath();
GameCtx.arc(BallSprite, 50, 40, 0, 2 * Math.PI);
GameCtx.stroke();
}
I have worked through the dosbox Div to find the canvas, but once I have found the node holding the canvas how can I reference it?
Getting the context of dbGranChild[0] just results in an error..
Im trying to build an array of the pixels that make up the dosbox window, so thought using the canvas get image and looping through as frames change would be one way. If there is a better way altogether than my above attempt happy to take that as an answer.
Code: http://plnkr.co/edit/MC1n9HfwWcqXlAk95XCO?p=preview
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js-dos api</title>
<style type="text/css">
.dosbox-container { width: 640px; height: 400px; }
.dosbox-container > .dosbox-overlay { background: url(https://js-dos.com/cdn/digger.png); }
.dosbox-start { font-size: 35px !important; }
</style>
</head>
<body>
<div id="dosbox"></div>
<br/>
<button onclick="dosbox.requestFullScreen();">Make fullscreen</button>
<script type="text/javascript" src="https://js-dos.com/cdn/js-dos-api.js"></script>
<script type="text/javascript">
var dosbox = new Dosbox({
id: "dosbox",
onload: function (dosbox) {
dosbox.run("https://js-dos.com/cdn/digger.zip", "./DIGGER.COM");
},
onrun: function (dosbox, app) {
console.log("App '" + app + "' is runned");
}
});
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
</script>
</body>
</html>
See the w3Schools tutorial.
First, you need to use a <canvas> tag instead of a <div>.
That is, replace this:
<div id="dosbox"></div>
with something like this:
<canvas id="dosbox" width="200" height="100" style="border:1px solid #000000;">
</canvas>`
Second, replace this code:
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
With something like this:
var c = document.getElementById("dosbox");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
I am having trouble drawing a triangle on a canvas. Triangle: equilateral triangle with 2 points on the x-axis. So what I was thinking: I start in the bottom right corner, move up to the next point, and then move to the last point in the lower left. Here is what I have:
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<script type="text/JavaScript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var sWidth = screen.width;
var sHeight = screen.height;
var path=new Path2D();
path.moveTo((sWidth/2)+50,sHeight/2);
path.lineTo((sWidth/2),(sHeight/2)-50);
path.lineTo((sWidth/2)-50,sHeight/2);
ctx.fill(path);
}
}
</script>
</head>
<body onload="draw();">
<div align = "center">
<canvas id = "canvas">
</canvas>
</div>
</body>
</html>
Nothing gets drawn. I read: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes, but I'm not sure what I messed up.
You need to give a size to your canvas. Either with CSS, HTML or in JavaScript
Here is a snippet that works :
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var sWidth = canvas.width;
var sHeight = canvas.height;
var path=new Path2D();
path.moveTo((sWidth/2)+50,sHeight/2);
path.lineTo((sWidth/2),(sHeight/2)-50);
path.lineTo((sWidth/2)-50,sHeight/2);
ctx.fill(path);
}
}
draw();
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<style>canvas { width: 200px; height: 200px; border: 1px solid red; }</style>
</head>
<body>
<canvas id="canvas">
</canvas>
</body>
</html>