Background:
This is my first mini project for Math&Physics Simulation. I know how to dispatch a state of Component and let them change itself. But I am new to visualization especially with Javascript
Requirements:
1. They are at least 3 points. First and the last of time line
2. numberOfBreakPoints are changing according to form
3. maximumRuntime in the line reflex by form
Example in the picture
Question:
How to use Javascript draw a line like in the picture?
You can do this easily using the antd npm module's step component for your such a view.
You can get more information from this link
Please take a look at Canvas, that should help you :)
This is the w3schools.com article: https://www.w3schools.com/graphics/canvas_drawing.asp
Here is some sample code
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#191919";
ctx.fillRect(0,0,400,5);
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
Related
Alright so I got this issue.
I am currently making a City Map (village) for my game, but the problem is building placing. How do I achieve this?
Now im taking for example Ikariams map as an example, testing grounds. Now this is the map itself
http://www.mmoreviews.com/imgs/Ikariam-shot-1.jpg
Now how do I place the buildings in? Getting coordinates of where the building should be and then just fit in the building.png into it or?
A good solution for that is using the HTML5 Canvas element. That allows you to have a background image and draw other images on it. Drawing lines, circles is quite simple as well (that can be animated with javaScript).
You need the canvas itself:
<canvas id="canvas" width="800" height="600">
</canvas>
Some CSS:
canvas{
background-image: url('village.jpg');
}
And some lines in your <script>
var canvas = document.getElementById("canvas");
var map = canvas.getContext("2d"); //main object to draw
var house=new Image();
house.src='house.jpg';
house.onload=function(){
map.drawImage(house, 80,80); //actually drawing and giving coordinates
}
Hope it is helpful.
I am working on HTML5 canvas with image manipulation. In my canvas I have number of images. When I want to clip the images individually. But when I clip one image by creating a shape and use clip() function, it is working fine. But the problem arise when I try to clip another image using the same method. As the canvas stored the previous shape it will concatenate with the new one and clip the second image accordingly. I want destroy the previous shape. Please note that I can't use the clearRect() to clear the canvas as my previous clipped image is there.
Please ref the link :
Demo Problem
In the link drag the image into canvas predefined layer and drag the image around. You can clearly see that the image got clipped properly if it try to go out of the border.
Now drag another image into the canvas in a different box. Now you can see the clipping is not functioning properly.
Here what I have done in the script :
JS Script
Here the JSFiddle Link
JSFiddle Link
Can you help me to fix this issue?
It will be helpful if you find another way to clear the previous shape.
Thanks in advance.
I have fix the issue by own. The canvas doesn't provide the multiple image clip option. So if you want to clip multiple image in your canvas you have to use your own clip function. Just clear the area by clearRect() of the canvas outside your selection. Iterate this process for each image and you are done !
Solution Link :
Solution Demo
JS Script Link :
JS Script
Thanks.
The best solution I could find is to use a hidden canvas, and draw to that, then use the putImageData method onto your main canvas.
var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");
var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");
ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);
ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);
function copy() {
var imgData = ctxTemp.getImageData(10, 20, 50, 10);
ctx.putImageData(imgData, 10, 10);
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br /><br />
<br />
<button onclick="copy()">Copy</button>
I'm new to HTML5, and I'm planning to create a tool to demonstrate how a character was written by hand in correct order.
I've this code to create a Chinese character with canvas, but is there a way to draw it step by step until the whole character is complete? Using Javascript is welcome, I don't want to use gif or flash to draw so many frames.
Any idea? Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Canvas beginePath example</title>
<script>
function beginDemo() {
var canvas = document.getElementById("demo")
var ctx = canvas.getContext('2d');
ctx.font = "52pt 楷体";
ctx.fillText("字", 220, 200);
}
</script>
</head>
<body onload="beginDemo();">
<canvas id="demo" width="800" height="800"></canvas>
</body>
</html>
The zhongwen development tool (GPL) includes a large text file with stroke animation data. I remember that it was fairly easy to render the stroke shapes using Pixi, but animating them seemed challenging. At the time I made a mental note to find out from the zdt people if the data could be used and then make something to animate it nicely, but never did. Someone else had a similar idea which is really quite nicely done. Code is MIT license. Maybe you can use that, or at least get some ideas from it. Assuming three years on this might still be relevant to you.
I'am new to canvas. I was using the following code to insert a image in canvas from another image. When I try to create image from a div using the code
<!DOCTYPE html><html>
<head>
<title>test</title>
<script type="text/javascript">
var colour="#ccc",bgcolour="#fff";
function paint(hhh){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var img=document.getElementById('mine');
ctx.drawImage(img,0,0);
}
</script>
</head>
<body onload="paint('scribble');" >
<canvas id="canvas" style="border:solid 1px;" width="400" height="400">g</canvas> <div id="mine">canvas</div>
</body>
</html>
It is not working.
My question is how to draw a image from div instead of another image?
The only images you may draw with drawImage on a Canvas, are those declared in "src" attributes of a image object. Specifications may be found here.
I don't know any method to put the contents of a div tag inside of an image object and I don't think this is really an easy thing to do. You should think about alternatives...
The problem is you can't draw to the canvas from an element that isn't an image, or another canvas element. Check out this MDN article for some more information Using images with canvas
Another issue is you are treating a div like an image in your events, divs do not have an onload event.
I have run into an issue when attempting to globalCompositeOperation to mask/blend shapes and text (shapes mask/blended with other shapes works just fine) in Chrome (more specifically I am using Chrome 12.0.7). Can anyone suggest where I might have gone astray here or suggest a workaround within the canvas element?
Here is an image showing what I'm seeing: http://i.stack.imgur.com/wRunv.jpg
Here is the code that will reproduce these results:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="testCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
// setup canvas
var tcanvas = document.getElementById("testCanvas");
var tcontext = tcanvas.getContext("2d");
// draw square
tcontext.fillStyle = "#FF3366";
tcontext.fillRect(15,15,70,70);
// set composite property
tcontext.globalCompositeOperation = "xor";
// draw text
tcontext.fillStyle="#0099FF";
tcontext.font = "35px sans-serif";
tcontext.fillText("test", 22, 25);
</script>
</body>
</html>
seems like the XOR globalCompositeOperation problem is a chrome bug that happens only with fillText.
Other drawing methods seem to work, see here: http://jsfiddle.net/Y5wvb/
You should report this bug to the Chromium project: http://code.google.com/p/chromium/issues/list
When you do, post the url of the posted issue here to we can vote it up :)
I found out that if you change the order of drawing, e.g. draw the text before filling the rectangle, the XOR works just fine. see here: http://jsfiddle.net/Y5wvb/1/