<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 320px;
height: 480px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="position: relative;" id="container">
<canvas id="myCanvas" width="320" height="480"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="plane" width="320" height="480"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var c2=document.getElementById("canvas2");
var c3=document.getElementById("plane");
var plane;
var ground;
var score1 = "1"
var score = score1;
var increase = 6;
var delay = 40;
var scorez;
var fall = 0;
start();
function start(){
backgrounds();
var scorez = setInterval(scoring, delay);
setInterval(planeUpdate, delay);
setInterval(donwer, delay);
}
function backgrounds(){
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0, 280);
my_gradient.addColorStop(0,"white");
my_gradient.addColorStop(1,"blue");
ctx.fillStyle=my_gradient;
ctx.fillRect(0,0,320,480);
ground = c.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0,450 , 320 ,30);
}
function scoring(){
scores();
score2();
}
function scores(){
score -= 3-(3+increase);
}
function score2(){
var context = c2.getContext('2d');
context.clearRect(0, 0, c2.width, c2.height);
var w = c2.width;
c2.width = 1;
c2.width = w;
var text=c2.getContext("2d");
text.font="20px Georgia";
text.fillText(score ,15,20);
var text=c2.getContext("2d");
text.font="20px Georgia";
text.fillText(fall ,40,40);
}
function hit(){
}
function loes(){
clearInterval(scorez);
}
plane = c3.getContext('2d');
var img = new Image();
img.src = "images/Plane.png"; //transparent png
function planeUpdate(){
var context = c3.getContext('2d');
context.clearRect(0, 0, c3.width, c3.height);
var w = c3.width;
c3.width = 1;
c3.width = w;
plane.drawImage(img, 40, fall, 50, 50);
}
function donwer(){
//myCanvas.onmousedown = function(e){
fall -= 1-2;
//}
}
</script>
<!--
http://4.bp.blogspot.com/-BrJHwoqM2qg/Uq94Il8t-1I/AAAAAAAAD7s/vyFLZUgMkdA/s1600/Plane.png
--!>
</body>
</html>
So my issue is; is that I can not seem to get onmousedown function to work. Could somebody please suggest what I am doing wrong. Thank you. I would like the plan to move down when the mouse is not pressed and while the mouse is being held the plan to go up. Thank you.
myCanvas is undefined.
You already stored a reference to canvas#myCanvas with var c=document.getElementById("myCanvas");, so use c instead of myCanvas:
c.onmousedown = function(e){
fall -= 1-2;
}
Or you could use document.getElementById("myCanvas").onmousedown = ...
Related
I've created a timer that switches and loops between images.
I'm looking to create a pause in between the images in which nothing is shown.
So logo1 on for 15 seconds
hide images for 30 seconds
logo2 on for 15 seconds
and so on
This is what I've got so far.
Ideally, the hide would hide both DIVS
<html>
<head>
<style>
.box1 {
background-color: rgba(0,0,0,0);
color: #fff;
opacity: 1;
align-content: safe;
}
.brandlogo {
background-color: rgba(0,0,0,0);
position: absolute;
top: 500;
left: 1100;
}
.box2 {
background-color: rgba(0,0,0,0);
color: #545454;
position: absolute;
top: 400;
left: 1000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1" id="art">
<img class="brandlogo" id="image" src="logo1.png" width="100">
</div>
<div class="box box2" id="frameart">
<img class="brandframe" id="frame" src="adframe2.png" width="300">.
</div>
</div>
<script type="text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
function timercount() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(timercount, 3000);
$("#art").show();
setTimeout(function() {
$("#art").hide();
}, 500);
</script>
</body>
</html>
Let me know how it goes :)
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
// jquery api on hide
// https://api.jquery.com/hide/
function hideArt() {
$("#art").hide(30000, changeLogo);
}
function changeLogo() {
if (++currentPos >= images.length) {
currentPos = 0;
}
image.src = images[currentPos];
// restart loop
loop();
}
function loop() {
// setTimeout api
// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
setTimeout(hideArt, 15000);
}
// start loop
loop();
</script>
I have the following html file:
<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;"></canvas>
<body style="background-color:#FF0000;">
<script>
var canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = "#00FF00"
ctx.fillRect(0, 0, 2400, 2000) // background
ctx.stroke()
</script>
which produces a page that looks like this:
Notice that the canvas begins slightly below and to the right of the top left corner. How can I place it exactly at the top left corner?
Add margin: 0; padding: 0; to the body and it will place the canvas to the top-left.
Use position position:absolute; top: 0; left: 0;.
<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;position:absolute; top: 0; left: 0;"></canvas>
<body style="background-color:#FF0000;">
<script>
var canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = "#00FF00"
ctx.fillRect(0, 0, 2400, 2000) // background
ctx.stroke()
</script>
Try this on your css
*{
padding:0;
margin:0;
}
body{
background:#00FF00;
}
canvas{
position: absolute;
top: 0;
left: 0;
}
My task is to add 5 images (smile.png) to 5 randomly positions in the left half of the page which is a div with id="leftSide" and size 500x500px
so here is my code
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var count = 0;
function generateFaces(){
while(count < numberOfFaces) {
var this_img=createElement("img");
this_img.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
var toppos = Math.random() * 400;
var top_pos = Math.floor(toppos);
var leftpos = Math.random() * 400;
var left_pos = Math.floor(leftpos);
this_img.style.left=left_pos + "px";
this_img.style.top=top_pos + "px";
theLeftSide.appendChild(this_img);
count+=1;
}
}
img {
position:absolute
}
div {
position:absolute;
width:500px;
height:500px;
}
#rightSide {
left: 500px;
border-left: 1px solid black;
}
<body onload="generateFaces()">
<h1>Matching game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
It should do
this
But instead it shows just a white page.
Change createElement to new Image();
var this_img=new Image();
I am making a canvas project and using some .png pictures. I used it in one file, canvas drew it up perfectly and all was well. But when i tried to to the same thing in a different file the quality of the pictures sank for no apparent reason. Would love some help/explenation to why this occured!
Here are the difference in coding, just open the files to see the difference in quality.
"Good quality code"
<!DOCTYPE html>
<html>
<head>
<title>Övning 1</title>
<style type="text/css">
*,body{
margin: 0px;
padding: 0px;
text-align: center;
background:url('bilder/background.png');
}
canvas{
border: 1px #999999 solid;
margin-top: 50px;
box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75) inset;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="900" height="400"></canvas>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var path = "bilder/helnot.png";
var image1 = new DragImage(path, 200, 100);
var image2 = new DragImage(path, 300, 100);
var gKlav = new Image();
gKlav.src = "bilder/g-klav.png";
var loop = setInterval(function() {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, 900, 400);
image1.update();
image2.update();
}, 30);
var mouseX = 0;
var mouseY = 0;
var mousePressed = false;
var dragging = false;
function DrawLines(){
ctx.fillStyle = "#000000";
ctx.fillRect(50,160,800,1);
ctx.fillRect(50,180,800,1);
ctx.fillRect(50,200,800,1);
ctx.fillRect(50,220,800,1);
ctx.fillRect(50,240,800,1);
ctx.drawImage(gKlav, 40, 40);
}
//Saves the cursers location into two vairables
$(document).mousemove(function(e) {
mouseX = e.offsetX;
mouseY = e.offsetY;
})
//Specifies what happens when the mouse is clicked
$(document).mousedown(function() {
mousePressed = true;
}).mouseup(function() {
mousePressed = false;
dragging = false;
});
//'this.x' and 'that.x' refers to the location of the top left corner of the image.
//'startX' and 'startY' refers to the distance between the curser and the image.
function DragImage(src, x, y) {
var that = this;
var startX = 0;
var startY = 0;
var drag = false;
this.x = x;
this.y = y;
var img = new Image();
img.src = src;
this.update = function() {
if (mousePressed) {
var left = that.x;
var right = that.x + img.width;
var top = that.y;
var bottom = that.y + img.height;
if (!drag) {
startX = mouseX - that.x;
startY = mouseY - that.y;
}
if (mouseX < right && mouseX > left && mouseY < bottom && mouseY > top) {
if (!dragging){
dragging = true;
drag = true;
}
}
} else {
drag = false;
$(document).mouseup(function(){
if((that.y + (img.height/2)) > 145 && (that.y + (img.height/2)) < 155){that.y = 140}
if((that.y + (img.height/2)) > 155 && (that.y + (img.height/2)) < 165){that.y = 150}
if((that.y + (img.height/2)) > 165 && (that.y + (img.height/2)) < 175){that.y = 160}
if((that.y + (img.height/2)) > 175 && (that.y + (img.height/2)) < 185){that.y = 170}
if((that.y + (img.height/2)) > 185 && (that.y + (img.height/2)) < 195){that.y = 180}
if((that.y + (img.height/2)) > 195 && (that.y + (img.height/2)) < 205){that.y = 190}
});
}
//Makes the image 'drag' across the screen.
if (drag) {
that.x = mouseX - startX;
that.y = mouseY - startY;
}
ctx.drawImage(img, that.x, that.y);
DrawLines();
}
}
</script>
</body>
</html>
"Bad quality code"
<!DOCTYPE html>
<html>
<head>
<title>Övning 2</title>
<style type="text/css">
*,body{
margin: 0px;
padding: 0px;
text-align: center;
background:url('bilder/background.png');
}
canvas{
border: 1px #999999 solid;
margin-top: 50px;
box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75) inset;
}
button{
white-space:nowrap;
display:inline-block;
position:relative;
background:#C22E3A;
border:1px black solid;
text-decoration:none;
color:white;
padding: 6px 9px;
border-radius:3px;
margin:5px;
padding-left:50px;
padding-right: 50px;
-webkit-box-shadow: 0 5px 1px rgba(0,0,0,0.2);
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
transition: background-color linear 0.07s;
}
button:active{
top:3px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
#inputBox{
display: none;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="900" height="400"></canvas><br />
<button id="start" onclick="Activate()">Start</button><br />
<input type="text" id="inputBox">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var start = false;
var helnot = "bilder/helnot.png";
var helnot2 = new RandomizeNote(helnot);
var gKlav = new Image();
gKlav.src = "bilder/g-klav.png";
var loop = setInterval(function() {
if(start){
document.getElementById('start').style.display = "none";
document.getElementById('inputBox').style.display = "inline";
helnot2.update();
}
Sheet();
}, 30);
function Sheet(){
ctx.fillStyle = "#000000";
ctx.fillRect(200,160,500,1);
ctx.fillRect(200,180,500,1);
ctx.fillRect(200,200,500,1);
ctx.fillRect(200,220,500,1);
ctx.fillRect(200,240,500,1);
ctx.drawImage(gKlav, 200, 150);
}
function Activate(){
start = true;
}
function RandomizeNote(src){
var img = new Image();
img.src = src;
this.update = function(){
ctx.drawImage(img, 430, 150);
}
}
</script>
</body>
</html>
Hello I am lilbit new to Javascript and Jquery.
i want to move earth(image) around sun(image) but i dont want to use any jQuery-plugin.
I have tried few Option but it is not working.
So If there is anyway(i guess it is) then plz answer.
Thanks in Advance
<html>
<head>
<style type="text/css">
body {
background-color: ivory;
}
canvas {
position:absolute;
left:15%;
top:5%;
margin-left:center;
margin-top:center;
background-color:black;
border:1px solid red;
}
#Aditya{
position:relative;
top:25%;
left:20%;
}
</style>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas = document.getElementById("icanvas");
var ctx = canvas.getContext("2d");
var radianAngle = 0;
var cx = 400;
var cy = 400;
var radius = 230;
var img = document.getElementById("myearth");
img.height="5px";
img.width="5px";
img.onload = start;
function start() {
animate();
}
function animate() {
requestAnimationFrame(animate);
// Drawing code goes here
radianAngle +=Math.PI / 120;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(radianAngle);
ctx.drawImage(img, radius - img.width / 2, -img.height/2);
ctx.restore();
}
});
</script>
</head>
<body>
<canvas id="icanvas" width="800px" height="800px">
<img src="earth.jpg" alt="earth" id="myearth" width="50%" height="50%"></img>
<img src="sun.jpg" alt="Sun" id="Aditya"></img>
</canvas>
</canvas>
</body>
sorry for delay to upload code.only earth is moving into canvas.dont know how to put sun in center.
Thank you all to showing interest.But i finally did it.perhaps you would like to see.
<html>
<head>
<style type="text/css">
body {
background-color: ivory;
}
canvas {
position:absolute;
left:15%;
top:5%;
margin-left:center;
margin-top:center;
background-color:black;
border:1px solid red;
}
.sunimg{
position:absolute;
left:40%;
top:40%;
}
</style>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Aditya").addClass("sunimg");
var canvas = document.getElementById("icanvas");
var ctx = canvas.getContext("2d");
var radianAngle = 0;
var cx = 400;
var cy = 400;
var radius = 230;
var img = document.getElementById("myearth");
img.height="5px";
img.width="5px";
img.onload = start;
function start() {
animate();
}
function animate() {
requestAnimationFrame(animate);
// Drawing code goes here
radianAngle +=Math.PI / 120;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(radianAngle);
ctx.drawImage(img, radius - img.width / 2, -img.height/2);
ctx.restore();
}
});
</script>
</head>
<body>
<canvas id="icanvas" width="800px" height="800px">
<img src="earth.jpg" alt="earth" id="myearth" width="50%" height="50%"></img>
</canvas>
<img src="sun.jpg" alt="Sun" id="Aditya"></img>
</body>