I'm looking into this clock. I have no experience with the js that comes with this file.
Here is the demo
Here is all the code
How can I edit the face of the clock?
I'm looking at this and I would like more control over what the hands look like. Can someone tell me what makes them come to a point. How could I make them just a thick line?
// draw hour
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore();
// draw minute
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();
// draw second
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore();
ctx.restore();
}
Thanks!
Look at what each of the calls to ctx do to make the hand:
ctx.rotate(theta); // Rotates the canvas according to the hand position.
ctx.beginPath(); // Start drawing a path.
ctx.moveTo(-15, -4); // Set the "brush"/"pen" at center left corner.
ctx.lineTo(-15, 4); // Draw a line to position center right corner.
ctx.lineTo(clockRadius * 0.8, 1); // Draw a line to the edge, right corner.
ctx.lineTo(clockRadius * 0.8, -1); // Draw a line to the edge, left corner.
ctx.fill(); // Fill the polygon we just drew.
ctx.restore(); // Rotate the canvas back.
So, for example, changing the 1 and -1 values to 4 and -4 would make a thick rectangular face.
More learnin' can be aquired here: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
Related
Hi I want to rotate this shape around its center when I move my mouse, but currently it's rotating around (0, 0). How to change my code?
Source code (also see jsfiddle):
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Circle {
constructor(options) {
this.cx = options.x;
this.cy = options.y;
this.radius = options.radius;
this.color = options.color;
this.angle = 0;
this.toAngle = this.angle;
this.binding();
}
binding() {
const self = this;
window.addEventListener('mousemove', (e) => {
self.update(e.clientX, e.clientY);
});
}
update(nx, ny) {
this.toAngle = Math.atan2(ny - this.cy, nx - this.cx);
}
render() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
if (this.toAngle !== this.angle) {
ctx.rotate(this.toAngle - this.angle);
}
ctx.strokeStyle = this.color;
ctx.arc(this.cx, this.cy, this.radius, 0, Math.PI * 2);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.fillRect(this.cx - this.radius / 4, this.cy - this.radius / 4, 20, 20);
ctx.closePath();
ctx.restore();
}
}
var rotatingCircle = new Circle({
x: 150,
y: 100,
radius: 40,
color: 'black'
});
function animate() {
rotatingCircle.render();
requestAnimationFrame(animate);
}
animate();
All good answers, well frustratingly no... they fail to mention that the solution only works if the current transform is at it default. They fail to mention how to get back to the default state and save and restore states.
To get the default transformation state
ctx.setTransform(1,0,0,1,0,0);
To save and restore all states
ctx.save();
ctx.transform(10,0,0,2,200,100); // set some transform state
ctx.globalAlpha = 0.4;
ctx.restore(); // each save must be followed by a restore at some point
and they can be nested
ctx.save(); // save default state
ctx.globalAlpha = 0.4;
ctx.save(); // save state with alpha = 0.4
ctx.transform(10,0,0,2,200,100); // set some transform state
ctx.restore(); // restore to alpha at 0.4
ctx.restore(); // restore to default.
setTransform completely replaces the current transformation. while transform, scale, rotate, translate, multiply the existing transform with the appropriate transform. This is handy if you have an object attached to another, and want the transformation of the first to apply to the second, and additional transforms to the second but not to the first.
ctx.rotate(Math.PI /2); // Rotates everything 90 clockwise
ctx.rotate(Math.PI /2); // Rotates everything another 90 clockwise so that
// everything is 180 from default
ctx.translate(1,1); // move diagonally down by 1. Origin is now at 1,1
ctx.translate(1,1); // move diagonally down by 1. Origin is now at 2,2
ctx.translate(1,1); // move diagonally down by 1. Origin is now at 3,3
ctx.translate(1,1); // move diagonally down by 1. Origin is now at 4,4
ctx.scale(2,2); // scale by 2 everything twice as big
ctx.scale(2,2); // scale by 2 everything four times as big
And an alternative that does not require the default transform state of ctx
// scaleX, scaleY are scales along axis x,y
// posX, posY is position of center point
// rotate is in radians clockwise with 0 representing the x axis across the screen
// image is an image to draw.
ctx.setTransform(scaleX,0,0,scaleY, posX, posY);
ctx.rotate(rotate);
ctx.drawImage(image,-image.width / 2, -image.height / 2);
Or if not a image but a object
ctx.setTransform(scaleX,0,0,scaleY, posX, posY);
ctx.rotate(rotate);
ctx.translate(-object.width / 2, -object.height / 2);
You need to:
first translate to the point of rotation (pivot)
then rotate
then either:
A: draw in at (0,0) using (-width/2, -height/2) as relative coordinate (for centered drawings)
B: translate back and use the object's absolute position and subtract relative coordinates for centered drawing
Modified code:
ctx.beginPath();
ctx.lineWidth = 1;
ctx.translate(this.cx, this.cy); // translate to pivot
if (this.toAngle !== this.angle) {
ctx.rotate(this.toAngle - this.angle);
}
ctx.strokeStyle = this.color;
ctx.arc(0, 0, this.radius, 0, Math.PI * 2); // render at pivot
ctx.closePath(); // must come before stroke() btw.
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.fillRect(-this.radius / 4, -this.radius / 4, 20, 20); // render at pivot
Modified Fiddle
Bonus tip: you're currently using save()/restore() calls to maintain the transformation matrix. Another way could be to set the matrix using absolute values initially replacing the save()/restore() - so instead of the first translate():
ctx.setTranform(1,0,0,1,this.cx, this.cy); // translate to pivot
You can also set things like styles on an individual basis for each. Regardless, it doesn't change the core solution though.
You have to first translate to the circle centre, make the rotation and then translate back
Do this before rendering the circle and the square
ctx.translate(this.cx, this.cy);
ctx.rotate(this.toAngle - this.angle);
ctx.translate(-this.cx, -this.cy);
jsfiddle below:
https://jsfiddle.net/1st8Lbu8/2/
I need to draw a Pentagon with html 5 canvas in Javascript. Not much else to write here. I have tried looking it up, but a lot of the examples don't work correctly.
The pentagon starts at the 3oclock pos use rotation to change the start position in radians. ie To start at the top rotation is -90deg = -Math.PI / 2
function pentagon(x, y, radius, rotation){
for(var i = 0; i < 5; i ++){
const ang = (i / 5) * Math.PI * 2 + rotation;
ctx.lineTo(
Math.cos(ang) * radius + x,
Math.sin(ang) * radius + y
);
}
ctx.closePath();
}
ctx.beginPath();
pentagon(100,100,50,-Math.PI / 2);
ctx.fill();
ctx.stroke();
The canvas context.arc() method draws distorted arcs when the context is scaled up. It looks like the arcs are (poorly) approximated with a Bézier curve. Works correctly in Firefox. Untested in IE.
I observed this problem some time ago, but recently it seems to have become much worse (I'm not sure when).
I found a number of canvas issues on StackOverflow, but not this one. If you know it to be a manifestation of an already-reported issue, please forward a link. I've already reported it via Chrome's Help/Report Issue mechanism.
Before I write my own, does anyone have a workaround? ...perhaps an overloaded or alternative 'arc' method?
The following demo is viewable here: http://keveney.com/chrome_arc_bug.html
paint_canvas();
// simulate circle with line segments
//
function regular_polygon(ctx, segments, cx, cy, r) {
var i, a;
ctx.moveTo(cx + r, cy);
for (i = 0; i < segments; i++) {
a = (Math.PI * 2) * i / segments;
ctx.lineTo(cx + r * Math.cos(a), cy + r * Math.sin(a));
}
ctx.closePath();
ctx.stroke();
}
function paint_canvas() {
var ctx;
// draw unscaled circle using canvas 'arc' method
//
ctx = document.getElementById('canv').getContext('2d');
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.lineWidth = 1.25;
ctx.arc(250, 250, 200, 0, 2 * Math.PI, false);
ctx.stroke();
// draw enclosing polygons
//
ctx.beginPath();
ctx.strokeStyle = "#c00";
regular_polygon(ctx, 36, 250, 250, 215);
regular_polygon(ctx, 36, 250, 250, 185);
// the same but scaled up from smaller units
//
ctx = document.getElementById('canv2').getContext('2d');
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.scale(100, 100);
ctx.lineWidth = 1.25 / 100;
ctx.arc(2.5, 2.5, 2, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#c00";
regular_polygon(ctx, 36, 2.5, 2.5, 2.15);
regular_polygon(ctx, 36, 2.5, 2.5, 1.85);
}
body {
background-color: #F4F4F4;
width: 800px;
margin-left: auto;
margin-right: auto;
}
canvas {
background-color: #FFFFFF;
}
<p>Chrome arc scaling bug</p>
<canvas id="canv" height=500 width=500></canvas>
<canvas id="canv2" height=500 width=500></canvas>
<p>expected: Both images should be identical.</p>
<p>actual: Arc in second image is badly distorted.</p>
<p>Issue reported 6/17/2015.</p>
<p>tested with 43.0.2357.124 (64-bit)</p>
<p>This issue was observed some time ago, but has gotten worse in recent releases of Chrome. Not tested on Internet Explorer. If you find a convenient solution,
please notify Matt Keveney, matt#keveney.com</p>
This effect stems from an approximation of a circle with a small radius, it looks more like a square than a circle.
If you knowingly will make this kind of circles, I'd recommend making a function that draws a circle with a radius which will generate a good approximation of a circle that will scale well (I chose a radius of 10 in my example below), then adjust the parameters to achieve the wanted circle.
function drawSmallArc(x,y,r,scale) {
var adjust = 10/r;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#00f";
ctx.scale(scale/adjust, scale/adjust);
ctx.lineWidth = 1.25 / scale * adjust;
ctx.arc(x*adjust, y*adjust,r*adjust,0,2 * Math.PI, false);
ctx.stroke();
ctx.restore();
}
In action below
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
//Two referense circles.
ctx.beginPath();
ctx.strokeStyle = "#0f0"; //green
ctx.lineWidth = 1.25;
ctx.arc(250, 250, 180, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#0f0"; //green
ctx.lineWidth = 1.25;
ctx.arc(250, 250, 220, 0, 2 * Math.PI, false);
ctx.stroke();
//Red circle using OP's original circle
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#f00"; //Red
ctx.lineWidth = 1.25 / 100;
ctx.scale(100,100);
ctx.arc(2.5, 2.5, 2, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.restore();
//blue circle with better approximation of circle.
drawSmallArc(2.5,2.5,2,100);
function drawSmallArc(x,y,r,scale) {
var adjust = 10/r;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#00f";
ctx.scale(scale/adjust, scale/adjust);
ctx.lineWidth = 1.25 / scale * adjust;
ctx.arc(x*adjust, y*adjust,r*adjust,0,2 * Math.PI, false);
ctx.stroke();
ctx.restore();
}
<canvas id="canvas" height=500 width=500></canvas>
I have worked around the problem for now, using a high-count polygon. Mine is not a fully-compatible drop-in replacement for arc, so it will not be repeated here. It is much like the function used in the above sample code to render the red reference polygons.
I remain interested in a better solution, or a Chrome update that fixes the problem, in case anyone finds it.
For example lets say I am drawing some circle with arrow, transformatting it and rotating (code and jsfiddle below)... In given code, arrow is red... but when I make it gradient, the gradient is being rotaded during creation of whole object... so I need to apply gradient after everything is drawn... how do I do that?
Second thing... when applying global alpha opacity to context before drawing, arrow on circle is darker, because there are 2 layers in same place... how do I apply opacity to whole shape?
JSFiddle here
var x1 = 10;
var y1 = 10;
var x2 = 50;
var y2 = 50;
var dx = x2 - x1;
var dy = y2 - y1;
var radians = Math.atan2(dy, dx);
var length = Math.sqrt(dx * dx + dy * dy);
ctx.save();
ctx.translate(x1, y1);
ctx.rotate(radians);
ctx.beginPath();
ctx.arc(0, 0, 8, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(length, 0);
ctx.lineTo(length - 7, -4);
ctx.lineTo(length - 7, 4);
ctx.lineTo(length, 0);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle = "red";
ctx.stroke();
ctx.restore();
Gradient rotation
When you createLinearGradient you specify the starting and ending xy's
(basically you specify the line along which the gradient will follow).
Therefore, you can adjust the angle of that line such that the gradient fits your design needs even after it's rotated.
Opacity of the combined circle+arrow
As you've discovered, if you overlap drawings then the resulting opacity will be darker on the overlap.
You have 2 solutions to the darkened opacity:
start drawing the arrow at on the circumference of the circle rather than staring the arrow at the circle's center. This way you have small or no overlap.
combine the arc and arrow into 1 single path.
Here is my pseudo code:
var percentage = 0.781743; // no specific length
var degrees = percentage * 360.0;
var radians = degrees * Math.PI / 180.0;
var x = 50;
var y = 50;
var r = 30;
var s = 1.5 * Math.PI;
var context = canvas.getContext('2d');
context.beginPath();
context.lineWidth = 5;
context.arc(x, y, r, s, radians, false);
context.closePath();
context.stroke();
I'm using the KineticJS library to control the shapes I make and redraw them as necessary. My problem is that the above code does not work at all. I assume I have the math incorrect, because if I change radians to something like 4.0 * Math.PI is draws the entire circle.
I've been using HTML5 Canvas Arc Tutorial for reference.
Your code works just fine, but you have a starting angle that ought to be zero to get what you expect. Here's working code:
http://jsfiddle.net/HETvZ/
I think your confusion is from what starting angle does. It does not mean that it starts at that point and then adds endAngle radians to it. It means that the angle starts at that point and ends at the endAngle radians point absolutely.
So if you startAngle was 1.0 and endAngle was 1.3, you'd only see an arc of 0.3 radians.
If you want it to work the way you're thinking, you're going to have add the startAngle to your endAngle:
context.arc(x, y, r, s, radians+s, false);
Like in this example: http://jsfiddle.net/HETvZ/5/
Your code is just fine. you need to have:
s=0 i.e. starting point must be zero.
and if you want circle to start drawing at top you can use:
context.rotate(-90 * Math.PI / 180);
but after rotating you will have to check arc()'s x,y arguments. i used it like:
context.rotate(-90 * Math.PI / 180);
context.arc(-200, 200, 150, startPoint, radian, false);
context.lineWidth = 20;
context.strokeStyle = '#b3e5fc';
context.stroke();
context.closePath();
after this i needed to display percentage in text form so i did:
context.rotate(90 * Math.PI / 180);
context.fillStyle = '#1aa8ff';
context.textAlign = 'center';
context.font = "bold 76px Verdana";;
context.textBaseline = "middle";
context.fillText("50%", 200, 200);