I have a very simple HTML/Js code that is supposed to draw a simple circle on a canvas.
const canvas=
document.querySelector('#canvas1');
const ctx= canvas.getContext('2d');
ctx.canvas.width= window.innerWidth;
ctx.canvas.height= window.innerHeight;
class Particule{
constructor(x, y, dirX, dirY, taille, coul){
this.x= x;
this.y= y;
this.dirX= dirX;
this.dirY= dirY;
this.taille= taille;
this.coul= coul;
}
dessine(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.taille, 0,
Math.pi * 2, false);
ctx.fillStyle= this.coul;
ctx.fill();
}
}
const ob= new Particule(10, 10, 50, 50, 100, "white");
ob.dessine();
console.log(ob);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#canvas1{
position: absolute;
width: 100%;
height: 100%;
background: #333;
}
<!DOCTYPE html>
<html>
<head>
<title>Particles</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="canvas1">
</canvas>
<script type="text/javascript" src='script.js'></script>
</body>
</html>
The code is supposed to output a white circle on the top left corner of the screen but when I launch it, just the dark grey background appears even though there is no error logs on the console.
On Firefox, the is a warning saying
Use of mozImageSmoothingEnabled is deprecated. Please use the
unprefixed imageSmoothingEnabled property instead.
and I think it 'may' be the reason why things are not working.
The problem is I DON'T have mozImageSmoothingEnabled or ImageSmoothingEnabled anywhere in my code. I didn't even use it in the first place so how would I be able to replace it?
I am using the latest version of Firefox and I couldn't find any help about this anywhere.
If anyone can indicate me how could I fix this, it would be of great help.
Thanks in advance.
You should use Math.PI instead of Math.pi bro ^_^
Advices
Use a modern IDE/Code editor that will be help you with this little errors.
Use debugger to what values use computer. If you create breakpoint at the start and see step by step all your values in code you see that problem is in Math.pi
Related
I would like to visualise the data I am getting via API output as particles using three.js / particles.js .
I am receiving Integers between 2 and 42.
So, if my data equals 2 I would like to have two particles, if it equals 32, I would like to have 32 particles floating about without refreshing the page.
I'm trying to figure how I can "dynamically" add or delete particles based on the data I am receiving from the API call.
I've searched for all kinds of things but I think I am missing the right terminology for this to get valuable results.
I basically want to able to update "maxParticles" (line 29) every 5 seconds with the API data and have particles appear and disappear without refreshing the page.
From tutorials my demo code currently looks like this (far from it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
height: 100%;
}
</style>
</head>
<body>
<canvas class="background"></canvas>
<script src="https://unpkg.com/#codegewerk/particle-cloud#1.x/dist/particles.min.js"></script>
<script>
const instance = new ParticleCloud({
selector: ".background",
maxParticles: 32,
color: "#ff0000",
connectParticles: true,
sizeVariations: 5,
});
instance.start();
</script>
</body>
</html>
As always, any ideas or input very much appreciated.
I'm currently trying to get a similar touch/stylus behaviour to Squid (the notetaking app). I have used the PointerEvent API and it all works, except for one annoying issue:
After I put down the stylus or the finger, it draws a stroke for the next ~0.3 seconds, but after that, no more pointermove events are fired as long as the pointer is down.
here's my code:
index.html
<!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>Draw</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<canvas id="canvas" width="500px" height="500px" style=" position: absolute;border: 2px solid red;"></canvas>
<script src="index.js"></script>
</body>
</html>
index.js
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white"
var pos = {}
canvas.addEventListener("pointerdown", function (e) {
pos.x = e.pageX;
pos.y = e.pageY;
});
canvas.addEventListener("pointermove", function (e) {
console.log(e.pressure)
switch (e.pointerType) {
case "pen":
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(e.pageX, e.pageY);
ctx.stroke();
pos.x = e.pageX;
pos.y = e.pageY;
break;
case "touch":
ctx.fillRect(e.pageX - 10, e.pageY - 10, 20, 20);
break;
}
});
index.css is just a css reset
I'm really confused over this and can't seem to find anyone else who had this problem. Any help would be appreciated!
Just add touch-action: none; to your canvas's style attribute.
After ~0.3 seconds starts touch events as page scrolling.
I need to program a html-based monitoring surface.
For the surface I need to code circles which move from x to y and only if number xy is greater than xy.
Hard to explain but actually similar like they have it on
https://www.solarweb.com
click "click to try the preview now" on the top, than click "view demo" and choose the first system "Fronius AT Sattledt Hybrid 2"
and see the animation above on the left side.
I´ve still been able to get a circle running from the beginning of a div to the end. but only 1 circle! is it possible to have more circles in a row doing the same?
Maybe anyone can help me :)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Bullet</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#energieFluss {
width: 900px;
height: 500px;
border: 5px black solid;
overflow: hidden;
}
#bullet {
position: relative;
left: 50px;
top: 25px;
}
</style>
<body>
<div id="energieFluss" width="900px" height="500px" color="red">
<img id="bullet" src="ball-blau.png" height ="25" width= "25">
</div>
<script>
var Bullet = document.querySelector ("#bullet");
var currentPos = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function moveBullet () {
currentPos += 8;
Bullet.style.left = currentPos + "px";
if (Math.abs(currentPos) >= 900) {
currentPos = -50;
}
requestAnimationFrame(moveBullet);
}
moveBullet ();
</script>
</body>
I think what you'll want to do here is create your image elements on the fly and then animate them. You could also do other fancy things like render on a canvas or use a JavaScript rendering library to do it more efficiently.
To create the elements on the fly, do something like this:
var balls = [];
// Run this in a loop to add each ball to the balls array.
var img = document.createElement("img");
img.src = "ball-blau.png";
img.height = 25;
img.width = 25;
document.getElementById("energieFluss").appendChild(img);
balls.push(img)
Post thought:
You could just statically define your image elements and animate multiple elements. If you already know how to animate one element, then you can apply that same knowledge to multiple.
I am new to Javacript (very, very new) and I need to place a loading spinner on a site. We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. So, we wanted to place a spinner to make sure users would not continue to tap the screen.
I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test.
Here is the code I am using:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1024px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
}
a,img,map,area {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<img src="screen2.jpg" width="1024" height="768" border="0">
<div id="spinner">
</div>
</body>
</html>
Any advice will be appreciated.
A few things are wrong with your code:
you have 2 closing <script/> tags after eachother (right before ), so that's a syntax error.
you have another syntax error. You're not closing jqueries document.ready function properly.
You're using a jQuery method but you're not including the jQuery library in your code.
You say color:'#000' in the spinner options, which means the spinner will be black (same as your background color so you will never see it).
The spinner works in its most simple form. See working example:
http://jsfiddle.net/wLkganhm/
If you're very new to javascript I suggest reading up on how to use the debugger so you can find the syntax errors for yourself :)
You have a few issues with your code as already pointed out.
I've put up a cleaned up version here http://jsbin.com/payuzeyopa.
Things to improve on/fix:
Try using a site like JSFiddle or JSBin to share/prototype your code with others
Keep your HTML, CSS and JavaScript files separate
Spot errors early by using tools built into the browser. For example, see http://discover-devtools.codeschool.com/ for an excellent starter.
Finally, read up on JavaScript and HTML :)
Good luck!
I have a demo using raphael.js. The code for it is very simple but when viewed in Internet Explorer (less that version 9) I get a Raphael canvas that is 1000px by 1000px and I can't figure out why. I'm using version 1.5.2 of Raphael. Code below:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Raphael Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="../shared/img/favicon.png" rel="shortcut icon">
</head>
<body>
<div id="graph"></div>
<script src="../shared/js/raphael/raphael-min.js" type="text/javascript"> </script>
<script src="test.js" type="text/javascript"> </script>
</body>
</html>
CSS
/* Graph */
#graph { padding: 5px; width: 477px; height: 299; }
JS
var holder = document.getElementById('graph')
, width = holder.scrollWidth
, height = Math.round(width * 0.5625) + 25
, p = Raphael(10, 50, width, height)
, c = p.circle(p.width - 50, p.height - 50, 50);
alert(p.width + ' & ' + p.height);
I found a discussion in Raphael's Google group with the same problem but no resolution.
I had the same problem and using
var width = paper.canvas.clientWidth ? paper.canvas.clientWidth : paper.width;
var height = paper.canvas.clientHeight ? paper.canvas.clientHeight : paper.height;
instead of paper.width and paper.height solved it for ie older than version 9 and all the other browsers.