Hello could somebody tell me wath is wrong with my code. When i do the clear rect, it's doesn't work.
I just try to move the ball in the canvas. Actually my ball leave a mark. This kind of line is leave.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="_js/jquery1.6.js" type="text/jscript"></script>
</head>
<body>
<canvas id="dropBall" width="400" height="400"></canvas>
<script>
var dropBall = $("#dropBall")[0];
var dropContext = dropBall.getContext("2d");
dropContext.fillStyle = "green";
var ballX = 200;
var ballY = 200;
function activeBall() {
dropContext.clearRect(0, 0, dropBall.width, dropBall.height);
dropContext.arc(ballX, ballY, 10, 2 * Math.PI, 0, true);
dropContext.fill();
ballY--;
ballX++;
var time = 100;
setTimeout("activeBall()", time);
}
activeBall();
</script>
</body>
Shouldn't it be:
dropContext.clearRect(ballX,ballY,dropBall.width,dropBall.height);
or am I misunderstanding something?
If you do it the other way around, then the only rectangle getting cleared is the square from (0,0) to (width of ball,height of ball).
EDIT:
It actually might be
dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
If your ball is centered at ballX.
EDIT EDIT:
I fixed it for you:
function activeBall() {
dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
dropContext.beginPath();
dropContext.arc(ballX, ballY, 10, 2 * Math.PI, 0, true);
dropContext.fill();
ballY--;
ballX++;
var time = 100;
setTimeout("activeBall()", time);
}
You were clearing a rectangle on the top-left corner of your canvas.
You have to call beginPath() and then do all your drawing work. Clearing has to be called outside of beginPath() and fill().
The specific lines are:
dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
dropContext.beginPath();
Your Document DocType is wrong
For HTML5 try
<!DOCTYPE HTML>
This can cause mis-behavior from some browsers..
some html resources...
http://simon.html5.org/html-elements
http://www.w3schools.com/html5/tag_doctype.asp
Related
For an assignment I need to animate something simple using CSS and JavaScript. I've been able to figure out the CSS but everything I read to make an object fade in using JavaScript just doesn't seem to work with the object I drew in JavaScript. I just wanted to draw a circle in JavaScript and then animate it to fade in in 5 seconds.
Here is the basic Code I have so far:
HTML:
<body onload="draw();">
<canvas id="circle" width="450" height="450"></canvas>
</body>
JavaScript:
<script>
function draw()
{
var canvas = document.getElementById('circle');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 45;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#645862';
ctx.stroke();
}
}
</script>
As you can see I only have the circle part of the code. I have tried multiple versions of different fade in animations but I just can't quite get them to work. I'm not very good at JavaScript. It's the one language I have trouble understanding for some reason. I'm also really sick right now otherwise I would be troubleshooting more reasons as to why it isn't working.
To understand how a canvas works, you need to know that it's just a place to display something, and initially it doesn't do anything on its own. You've drawn the circle once, which is enough to display the circle, but not to animate it in any way.
If we want to move the circle in any direction, we must clear the canvas of the already drawn circle and draw the circle in a different place, changing its coordinates by N pixels. The same goes for transparency. We must change the transparency of the color of the circle in each frame, and draw the circle again and again.
This is how 2D and 3D canvas works, as well as all video games - they draw scenes 60 times per second, changing some values along the way, such as coordinates, values, color, transparency, height and width.
In order for this to work, we need two additional variables, opacity and the direction (fading) in which the opacity changes, to know whether the circle appears or disappears.
Also important is the recursive call to our draw() function. We will call it constantly, and we will constantly redraw our image on the canvas.
I also want to point out some conceptual mistakes in your code.
Dont use "var", it is deprecated. Use "let","const". Also don`t repeat "var","var","var" in every line. Use commas.
Dont use onload,onclick and others HTML on-attributes. They are only suitable for educational purposes, not for real work. Use script tag and document event listeners.
Dont name canvas id like "circle","box" etc. It is not a circle and a box, it is a canvas.
Use document.querySelector instead of document.getElementById. It is more modern
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas opacity animation</title>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>
<script>
document.addEventListener("DOMContentLoaded",()=>{
const OPACITY_SPEED = .005
let canvas = document.querySelector('canvas'),
context = canvas.getContext('2d'),
opacity = 1,
fading = true
draw()
function draw(){
// clear canvas for redrawing (important!)
context.clearRect(0, 0, canvas.width, canvas.height);
let circleX = canvas.width/2,
circleY = canvas.height/2,
radius = 45
// changing circle opacity
if(fading) opacity -= OPACITY_SPEED
else opacity += OPACITY_SPEED
// check if we need to fade in or to fade out
if(opacity >= 1) fading = true
if(opacity <= 0) fading = false
// draw circle
context.beginPath();
context.arc(circleX, circleY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = `rgba(0, 0, 0, ${opacity})`;
context.stroke();
// call draw() again and again
requestAnimationFrame(draw)
}
})
</script>
</body>
</html>
I am using a video input to draw onto a canvas in order to get the color of the pixel in the very middle of the canvas.
With the recent code I have the pixel color and pass it as a color value to draw a line. This line should run from left to right drawing the different colors of the video onto the canvas and add up with every line. But the line seems to be overwritten with every frame. Only one line is displayed which is moving from left to right. Can someone help me understand why and how I can change this behavior?
Thank you very much in advance.
let movie;
let playButton;
let movieInput = "/public/IMG_1569.m4v";
var playing = false;
function setup() {
let canvas = createCanvas(534, 300);
pixelDensity(1);
movie = createVideo(movieInput);
movie.size(width, height);
playButton = createButton("play").addClass("button");
playButton.mouseClicked(playVideo);
}
function draw() {
if (playing) {
movie.loadPixels();
var i = image(movie, 0, 0, width, height);
let pixelColor = get(width / 2, height / 2);
background(255);
let px = frameCount % width;
stroke(pixelColor);
var fineLine = line(px, 0, px, height);
}
}
function playVideo() {
if (playing) {
movie.pause();
playButton.html("play");
} else {
movie.play();
playButton.html("pause");
}
playing = !playing;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/public/style.css">
<title>p5.js example</title>
</head>
<body>
<h1>p5 no.1</h1>
<script src="/lib/p5.js"></script>
<script src="/lib/p5.dom.js"></script>
<script src="/sketch.js"></script>
</body>
</html>
The call to background() clears out old frames.
If you want old frames to stay on the screen, remove the call to background() in your draw() function.
More info can be found in the reference. I'd also recommend reading through your code and making sure you understand every line. It might help to read it out loud, or to write down an English description of every line. That will help you find issues like this in the future.
I have a WWWeb page with stacked <canvas> elements. The goal is to draw something persistent in the lower canvas and draw, clear, and redraw, repeatedly, in the upper canvas. According to w3.org and this StackOverflow article (How do I make a transparent canvas in html5?), canvas elements are, by default, transparent. What I am seeing is that not only are they not transparent, but that overlaying via z-index is not working. Here's a "vanilla" version of the page's code (complete and used to generate the images):
<html>
<head>
<title>Canvas Stack</title>
<script>
function doStuff() {
drawStuff(document.getElementById("lowerCanvas"), 0, 1);
drawStuff(document.getElementById("upperCanvas"), 1, 0);
}
function drawStuff(cvs, p0X, p1X) {
var ctx = cvs.getContext("2d");
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.strokeStyle = cvs.style.color;
ctx.beginPath();
ctx.moveTo(p0X * cvs.width, 0);
ctx.lineTo(p1X * cvs.width, cvs.height);
ctx.stroke();
}
</script>
</head>
<body onload="doStuff();" style="border:solid;">
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />
<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" />
</body>
</html>
and here's the result:
If I swap the order of the canvas elements
<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:inherit;top:0;width:300px;z-index:1;" />
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;" />
the result is
It seems as if the z-index has been ignored and that the order of declaration has primacy.
What I want is
(synthetic image)
The behavior is identical in Chrome, Edge, Firefox, and Internet Explorer under Windows 10. That makes me confident that I'm just missing some detail rather than experiencing an anomaly. However, I'm getting a flattened forehead from whacking my head against a wall and would really appreciate some guidance, here.
Thank you, all!
Some notes (maybe irrelevant; maybe not):
style="position:absolute;... (without the left and top entries) seems to do the same thing as style="left:0;position:absolute;top:0;...
In similar fashion, style="position:inherit;... is probably necessary if the canvas is to reside within a table's <td> and that <td> is other than the first one in a <tr>.
<html>
<head>
<title>Canvas Stack</title>
<script>
function doStuff() {
drawStuff(document.getElementById("lowerCanvas"), 0, 1);
drawStuff(document.getElementById("upperCanvas"), 1, 0);
}
function drawStuff(cvs, p0X, p1X) {
var ctx = cvs.getContext("2d");
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.strokeStyle = cvs.style.color;
ctx.beginPath();
ctx.moveTo(p0X * cvs.width, 0);
ctx.lineTo(p1X * cvs.width, cvs.height);
ctx.stroke();
}
</script>
</head>
<body onload="doStuff();" style="border:solid;">
<div style="position:relative;min-height:200px">
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:absolute;top:0;width:300px;z-index:0;"></canvas>
<canvas id="upperCanvas" style="color:blue;height:200px;left:0;position:absolute;top:0;width:300px;z-index:1;"></canvas>
</body>
</html>
You need to close your canvas elements explicitly. Simply close it with:
<canvas id="lowerCanvas" style="color:red;height:200px;left:0;position:inherit;top:0;width:300px;z-index:0;"></canvas>
instead of the embedded close "/>"
I also enclosed them in a div and used position:absolute so that they actually overlap...
My project is JSF+PRIMEFACES+JPA and i want to draw rectangles in a jsf web page (XHTML) .
that draw need to be showen after i click on a button based on a list of rectangle that already existe in the managed bean .
its possible to do that just with JSF and primefaces ? or i need to introduce javascript or something else ?
Update 1 :
i fount that richfaces have paint2d option . It'is possible to use just this functionnality from richfaces in my project ?
I think that you want this:
<!doctype html>
<html>
<head>
<title>Example</title>
<meta charset='utf-8' />
</head>
<body>
<input type="button" value="Click Me" onclick="changeColor()" />
<canvas id='example'>Somewhat</canvas>
<script>
var changeColor = function(){
var colors = ['red' ,'green','blue','yellow','brown','azure','gold'];
var example = document.getElementById("example"),
context = example.getContext('2d');
example.height = 480;
example.width = 640;
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = colors[parseInt(Math.random()*colors.length)];
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
}
</script>
</body>
</html>
Since the 5.1.8 elite release (or the 5.2-SNAPSHOT), Primefaces has the diagram component. It can create images you have above, so maybe that is something you cab use
I know that in js one must use canvas. Here simpliest example:
You can write javascript handler to capture click event and then invoke code that image a rectangle
<!doctype html>
<html>
<head>
<title>pathExample</title>
<meta charset='utf-8' />
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
<script>
var example = document.getElementById("example"),
context = example.getContext('2d');
example.height = 480;
example.width = 640;
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
I am making a loading spinner with html5 canvas. I have my graphic on the canvas but when i rotate it the image rotates off the canvas. How do I tell it to spin the graphic on its center point?
<!DOCTYPE html>
<html>
<head>
<title>Canvas test</title>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas && drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext('2d');
//Load the image object in JS, then apply to canvas onload
var myImage = new Image();
myImage.onload = function() {
context.drawImage(myImage, 0, 0, 27, 27);
}
myImage.src = "img/loading.png";
context.rotate(45);
}
}
</script>
</head>
<body>
<canvas id="myDrawing" width="27" height="27">
</canvas>
</body>
</html>
Here is the complete working example:)
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cog</title>
<script type="text/javascript">
var cog = new Image();
function init() {
cog.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABK1JREFUeNqMVt1ZGzkUvVfS4IW1l8GO82w6IBXE7mCpAFMB+Pt4Z6iApALcAe4AU0HoAJfg7BPYHinnXmmciX+y0YdmJHnQ0bk/R5cvh5cUyFPwRD4EChgEvGWMB36R3+JaiTkmD5gOs8yNb25uLlerFf1pM2yIGA82TEY7xow1oj4GBU6S6yywPNG4JwDH+XGv0Whs7ndN8n97mmPsLCSYgy7ImPQE/pFDyAF+7L0fgTNFUDBcLal90taD1doQ/T6NT9DnW8zkT+jJuQVYukG3hifCVk/L3JOxMBa8VVlSp9MhHKLaB+zpNo1fdgEpmByuMqUAV5viOQLwXNax9KBAFNEEpN1pUwnQmvl6aTza6zNjrCKaymeyOdYAMgfg18iG4T/qw+AC94zvpzDjcwqOXo3VGH26H0xMZ7jPxgT0R2zUi4BYt6bAfEbJvJFZKA4ODgZ5nhcJLE9mk35X21vWC/TXKmiwr2xszoQd/PQv3t/QCzY2twpqBpb5FKOp+hCgzWaTWq0W1Xx0ij5An9WC5VtiLMwvNBrVaSGMvQk5jHQVPN7sb0HzAtE+QJrNgrcUNEARieWCut0ugR0tl8sKcJ5Ahc3jRviPK8ZGTaaBwGKyT+gTiwM4a3Jrba6MbeVXo5F4kp9shn29ndUYC9vLirGDXzRhrYhD8DME5Hkg22df5rDYS/RXmVIsaP/Q/SXs600YnifTjbeSWliEdTYb3QyTqYfdDKTL4B1KS6tVqf6SgGq3P9BvZGpvNIrPCgVKZlGlCDQDxJiCjVppCab05DJHzb+b1Gm36X80cVjLuzozexs0f6IgRkA5XRhzIixRL1+IzhwdHVHrn1Y9oXe1i10aKT6bGGhg1CKK+cT0zCGCs0oXTIogybJMw/779//o48duMvnO9rzLn+Kz8wgS5Shqo4njpCoOQA5Ajb8adHh4SMvVghaLhYb/HsBip88krNVISSEigOlhjmi0LziNhr6wOsgO9C1339vbGznnNAU2AM9Svk235cqKieKGkldAf7DGvTrjnjJnzyQoMu0ZTuZgUqvmlYR+f39XIE4uqCX1E/rDZpCYmKwOOmivAfYK9KF1AM7EdG4uAMLAOjmQideQXOJQkyUisqYiFRhtSFbxCxj8do0T30dmTvLhC+an0MZZVBHX09tBTG4qFigZEJEChjTIEwtRik81Qa7uOQU0IrYAe7FRjqYw6SlYjgAyN1GmHsFIGPfVnxzFuFITKEkfYK+oWZ5qKlIkcZ7UE92oXBmeIgIxtAO5UtSHqo9uiLW+sme5ejSIRASeAFR4LYy8MMzL1aq3EYWzJF28BgMEzGYpBkrMKelgl+P6uTcVY8NjLYyYPwMTCcufSaouH6al9xNJcjC82vDb9uVZKbrWIumNO+waVsu1TCC+Wxcg6xaSpsZSYM2wLO9/U8qZWH+wztQnsfAxV/E3MIKZVf1FsmJVV8mamhEmxZ0X7sSsABsGv1tZJGejmptU7FBUDYzPAXQBwFEEl+9+stFEroJEci2ELwIMmZuWoSTE9DYYcWVCjlJrZWMpeBhlAEqBiulPE84S3ixU5gSTwGGOdyEVNJXxA8nPevshwABHktBS1YoQ+QAAAABJRU5ErkJggg=='; // Set source path
setInterval(draw,10);
}
var rotation = 0;
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.save();
ctx.clearRect(0,0,27,27);
ctx.translate(13.5,13.5); // to get it in the origin
rotation +=1;
ctx.rotate(rotation*Math.PI/64); //rotate in origin
ctx.translate(-13.5,-13.5); //put it back
ctx.drawImage(cog,0,0);
ctx.restore();
}
init();
</script>
</head>
<body>
<canvas width="27" height="27" id="myCanvas"></canvas>
</body>
</html>
rotate turns the canvas(?) around your current position, which is 0, 0 to start. you need to "move" to your desired center point, which you can accomplish with
context.translate(x,y);
after you move your reference point, you want to center your image over that point. you can do this by calling
context.drawImage(myImage, -(27/2), -(27/2), 27, 27);
this tells the browser to start drawing the image from above and to the left of your current reference point, by have the size of the image, whereas before you were starting at your reference point and drawing entirely below and to the right (all directions relative to the rotation of the canvas).
since your canvas is the size of your image, your call to translate will use the same measurement, (27/2), for x and y coordinates.
so, to put it all together
// initialization:
context.translate(27/2, 27/2);
// onload:
context.rotate(Math.PI * 45 / 180);
context.drawImage(myImage, -(27/2), -(27/2), 27, 27);
edit: also, rotation units are radians, so you'll need to translate degrees to radians in your code.
edits for rearranging stuff.
For anyone else looking into something like this, you might want to look at this script which does exactly what was originally being requested:
http://projects.nickstakenburg.com/spinners/
You can find the github source here:
https://github.com/staaky/spinners
He uses rotate, while keeping a cache of rectangles which slowly fade out, the older they are.
I find another way to do html loading spinner. You can use sprite sheet animation. This approach can work both by html5 canvas or normal html/javascript/css. Here is a simple way implemented by html/javascript/css.
It uses sprite sheet image as background. It create a Javascript timer to change the background image position to control the sprite sheet animation. The example code is below. You can also check the result here: http://jmsliu.com/1769/html-ajax-loading-spinner.html
<html>
<head><title></title></head>
<body>
<div class="spinner-bg">
<div id="spinner"></div>
</div>
<style>
.spinner-bg
{
width:44px;
height:41px;
background: #000000;
}
#spinner
{
width: 44px;
height: 41px;
background:url(./preloadericon.png) no-repeat;
}
</style>
<script>
var currentbgx = 0;
var circle = document.getElementById("spinner");
var circleTimer = setInterval(playAnimation, 100);
function playAnimation() {
if (circle != null) {
circle.style.backgroundPosition = currentbgx + "px 0";
}
currentbgx -= 44; //one frame width, there are 5 frame
//start from 0, end at 176, it depends on the png frame length
if (currentbgx < -176) {
currentbgx = 0;
}
}
</script>
</body>