I making some graphs using HTML canvas but I want to draw line with multiple colors, at every point it should change to a new random color,
ctx.moveTo(Ximg+46,Yimg+200);
for(i=0;i<num;i++){
if(js_array[i]=="900"){ctx.strokeStyle = "Grey";}
else{ctx.lineTo(Ximg+50+i*mul,(Yimg+200)-(js_array[i]*(height/max)));}
}
am gonna change grey to random but the problem is it colors the previous path(line) with grey,i want each piece of line in a different color,is it possible in Javascript?
in OpenGl there was command we used to write to take always the last given color or not,is there a similar one in Javascript?
With the context, the strokeStyle property can take rgba, rgb, and Hexadecimal colors as well as the name of the color.
I would suggest something along the lines of:
ctx.strokeStyle = "rgba(" + (Math.Random()*255) + "," + (Math.Random()*255) + "," + (Math.Random()*255) + ", 1)";
Or perhaps a new function that returns the color, or assigns it.
If that wasn't what you were looking for, could you supply some values for the undeclared variables so that we can test it more thoroughly?
Related
Heyo, I'm trying to set colors for some inline SVG element programmatically but it doesn't really work.
My code has, for example:
baseColor: HSLColor = HSLColor.of(30, 40, 50); //ugly but good for experiments
strokeColor: HSLColor = HSLColor.of(0, 0, 60); //default value, gets replaced
...
ngOnInit() {
this.strokeColor = {...this.baseColor, value: Math.max(0, this.baseColor.value - 40)};
}
<path d="..." style="{{'fill:' + this.baseColor + ';stroke:' + this.strokeColor + ';stroke-width:0.84px;'}}"/>
The resulting DOM element has a fill but NO stroke.
I've tried setting it via ngStyle, too. Doesn't work either.
My plan is to have the stroke color be a darker base color. For that, I thought I could just use the old attributes of the baseColor (hue, saturation, value) and override the value with a new one. If I remove the line in the onInit() method, a stroke will be visible (using the default color I set up above). The contents of this.strokeColor are virtually the same before onInit() and after, only with different values. Printing JSON.stringify(this.strokeColor) to console reveals as much. But it seems there is still some difference and I can't get my head around what it is.
Converting my frankenstein'ed stroke color to HSLColor with as doesn't work, either.
ngOnInit() {
this.strokeColor = {...this.baseColor, value: Math.max(0, this.baseColor.value - 40)} as HSLColor;
}
Using the following actually works but I'm just trying to figure out WHY:
this.strokeColor = HSLColor.of(this.baseColor.hue, this.baseColor.saturation, this.baseColor.value - 40);
I want to draw a line segment using cocos2d-js. Suppose I have two points
cc.p(50,50);
and
cc.p(200,200);
, how do I connect these two points using a line?
I've looked around and
cc.DrawNode();
is not having a drawLine() method though it has a drawDot() method. So I thought I should go for
cc.DrawingPrimitiveCanvas(renderContext);
but I can't seem to get it working. I am only starting to learn cocos2d-js. It would be very helpful if you can show me how to draw a simple line, be it using DrawNode() or DrawingPrimitiveCanvas().
I got the answer.
var line = new cc.DrawNode();
line.drawSegment(cc.p(50,50), cc.p(200,200),2);
I should've been looking for the 'drawSegment' method within 'DrawNode'.
Here's the usage:
drawSegment(from, to, lineWidth, color)
//draw a segment with a radius and color
Parameters:
{cc.Point} from,
{cc.Point} to,
{Number} lineWidth,
{cc.Color} color
I will try to explain my question with an example:
Let's say we have a background colored in a shade of red (easy to find out - color picker)
There is a semi-transparent element in front. It is colored blue but appears to be purple.
Again the resulting purple shade is easy to find but is there a wayt to find/compute the semi transparent blue shade?
Given: rgb(100,0,0) + x = rgb(100,0,100)
Find: x = rgba(0,0,100,0.5)
My actual case:
Background:rgb(147,150,72), Element rgb(44,100,62)
This is partially solved in this question for the sole case of white backgrounds, I am actually looking for a more general solution. I have tried to adapt the javascript code but I don't really understand how it is done or if a general solution is even possible. I might be able to code it myself is someone understand how it works and tells me. (if solved I will post solution here of course)
Links:
Subtraction of colours - Need to get the transparent value of a colour
Convert RGB to RGBA over white
A general exact solution is not existent.
As stated in the answer you linked to
C = X * a + Y * (a-1)
is the formula to calculate the color channel C out of the colors X and Y, while a is the alpha value of X.
So, when you try to find out the color + alpha channel, you have to solve this equation 3 times (once for each color). Each of those equation does have 2 unknowns.
So without requiring additional conditions (e.g. the one mentioned in your second link) to apply, there is an infinite amount of different solutions (or in the specific case of one byte per color channel, up to 256).
While determining one exact solution is impossible, you can, of course, determine one or more possible solutions, with the following way:
X = C/a - Y + Y/a // Formula from above solved for X
So the possible solutions are
r3 = r2/a - r1 + r1/a
g3 = g2/a - g1 + g1/a
b3 = b2/a - b1 + b1/a
with
rgb(r1, g1, b1) being the background color,
rgb(r2, g2, b2) being the mixed color
and rgba(r3, g3, b3, a) being the color that was painted on the background.
If you now select a so, that none of r3, g3 and b3 are below 0 or above 255, you get a valid solution.
First of all I am using javascript and KineticJS.
I have a picture of an xray(so you can picture what kind of colors its using) and the picture is a profile picture of the scull like these. I have some lines that are formed after users clicks at some specific points, which some of them intersect. In a pair of them I need to know when the bisectrix of the angle formed by the two intersecting lines, intersect with a specific part of the scull that is when the bone starts (which is greyer i think) My question is there a good way of checking this? I mean Suppoze i take each point on my bisectrix line and check the color of the pixels? How can I be sure since xrays might differ(film brightness etc). Could you give me a suggestion or lead me to somewhere?
Your question is a bit confusing.
If 2 lines intersect then 4 angles are created and therefore 4 bisecting lines are created.
Anyway here's how to get started...
Once you determine which points are interesting, you can use context.getImageData to fetch the rgba values of the pixels at those points.
Then convert each rgba pixel color to hsl format. Hsl format separates the Hue, Saturation & Lightness of a color.
Bones & teeth appear lighter so you can compare lightness values to discover bone/teeth.
[ Addition: Calculating points along the bisecting line ]
If you know the intersection point of 2 lines [x,y] and you know the angle you're interested in (radianAngle), then you can compute a point at distance (d) along the line that bisects that angle like this:
var lineX = x + d * Math.cos(radianAngle);
var lineY = y + d * Math.sin(radianAngle);
Then you can use the data from getImageData to fetch the rgba color at point [lineX,lineY]. Then convert to the hsl format and use the Light value to determine if [lineX,lineY] is over the lighter bone.
I want to be able to get the color of a pixel at specific x,y
co-ordinates on a canvas (A rectangles color, but the pixel will
sufice).
Is there anyway of doing this with normal javascript without adding any additional libraries?
I'm developing it with the idea of mobile platforms and would prefer not to use external libraries. Thanks
For the answer let's go straight to the source.
You want context.getImageData(x, y, width, height);
This grabs a rectangle out of the canvas and returns all the pixels there in the form of an "ImageData" object. This object in turn has a "data" attribute which is, for all intents and purposes, just a normal Array (it's not, but you can pretend it is if you just want to read from it).
The data array looks like
[r,g,b,a,r,g,b,a,r,g,b,a,...] where r,g,b, and a are the red, green, blue, and alpha channels of the colour of one pixel. The pixels are ordered as if they were being read in an english book (left to right, then top to bottom).
For you purposes, you can just do var pixel = context.getImageData(x,y,1,1).data. Then if you want to know the red part, do pixel[0], green? pixel[1]... and so on.
However remark that in my emprical tests, getImageData is an incredibly expensive operation (especially in Firefox; Chrome handles it faster, but with less bounds-checking). If you expect to do this query many times per-second, it may be worth getting a larger rectangle to cache some results. Of course this won't work if the pixel data is rapidly changing.
Canvas' getImageData() returns an ImageData object that copies the pixel data for the specified rectangle on a canvas.
var color = canvas2d_context.getImageData(pixel_coord_x, pixel_coord_y, 1, 1);
console.log('pixel red value: ' + color.data[0]);
console.log('pixel green value: ' + color.data[1]);
console.log('pixel blue value: ' + color.data[1]);
console.log('pixel alpha value: ' + color.data[1]);
...mostly from http://www.w3schools.com/tags/canvas_getimagedata.asp