Using HTML5 to demonstrate how characters were written - javascript

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.

Related

Interactive Form for math

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>

Large numbers in HTML canvas translate result in strange behavior

I'm trying to figure out why, when I give large a large number to the x component of a translate() call on an HTML canvas, rectangles no longer seem to draw at the appropriate coordinates.
In the example below, the two rectangles that are drawn differ only by 1 in the x component. Therefore, I would expect their left edges to be only one pixel apart. As you can see in Firefox and Chrome, that is not what happens.
<html>
<head>
<script type="text/javascript">
function go() {
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.translate(-1000000000, -500);
ctx.fillStyle = '#F00'
ctx.fillRect(1000000033, 520, 100, 200);
ctx.fillStyle = '#00F';
ctx.fillRect(1000000032, 720, 100, 200);
}
}
</script>
</head>
<body onload="go();">
<canvas id="canvas" width="800" height="600">
</canvas>
</body>
</html>
Here's the same example ready to look at:
http://jsfiddle.net/pQst6/
I also made an animated version. http://jsfiddle.net/ry35e/ As you can see, the drawing starts normal, but as the x parameter to the translate method increases, it proceeds to have weirder and weirder behavior.
Both Firefox and Chrome appear to behave the same, so it seems like expected behavior, not a browser bug. I am guessing it is some kind of precision problem. Do you agree/disagree?
If it is some kind of precision problem with canvas, I am guessing I will have to find or implement my own transformation matrix and wrap it around the canvas context. I'm sure it wouldn't be very hard to make, but does anybody know of a javascript library that does such transformations (with pop, push, etc)?
Thanks!
The deviations occur when you invoke fillRect with the integer 2^24 (16 777 216) or greater. This also happens to be the largest integer you can express with single precision. The working draft states support for double precision (2^53) but apparently that's not the case (yet). The Mozilla Developer Network (MDN) documentation of the CanvasRenderingContext2D states support for only single precision (float).
Single precision: http://en.wikipedia.org/wiki/Single-precision
Double precision: http://en.wikipedia.org/wiki/Double-precision
Working draft: http://www.w3.org/TR/2dcontext/
MDN Docs: https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#fillRect()

Trying to change dynamically a context.clip(); in a HTML5 canvas

I'm trying to to change dynamically a context.clip(); in a HTML5 canvas, drawing a shape with different values from an array. The idea is to get different parts of a board-game illuminated one after the other, clipping a darker version of the board to see just a square of the clearer version.
That's the code I'm struggling with, based in other questions from this very site, but I really cannot find the error:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Trivial</title>
<script type="text/javascript">
var strings = new Array();
strings[0] = "context.moveTo(134,487);context.lineTo(169,435);context.lineTo(200,449);context.lineTo(172,508);";
strings[1] = "context.moveTo(102,461);context.lineTo(142,414);context.lineTo(169,434);context.lineTo(133,485);";
strings[2] = "context.moveTo(71,434);context.lineTo(120,394);context.lineTo(143,414);context.lineTo(99,461);";
strings[3] = "context.moveTo(49,403);context.lineTo(101,370);context.lineTo(121,394);context.lineTo(70,435);";
strings[4] = "context.moveTo(19,340);context.lineTo(78,320);context.lineTo(99,370);context.lineTo(48,404);context.lineTo(31,375);";
strings[5] = "context.moveTo(172,507);context.lineTo(198,449);context.lineTo(231,458);context.lineTo(211,522);";
strings[6] = "context.moveTo(259,531);context.lineTo(267,466);context.lineTo(230,460);context.lineTo(213,521);";
strings[7] = "context.moveTo(257,531);context.lineTo(266,468);context.lineTo(300,470);context.lineTo(334,466);context.lineTo(347,531);context.lineTo(302,534);";
var images = new Array();
function draw(i){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = 'board_dark.jpg';
img.onload = function() {
context.drawImage(img,0,0);
}
images[i] = new Image();
images[i].onload = function() {
eval(strings[Math.floor(Math.random()*6)]);
context.closePath();
context.clip();
context.drawImage(images[i],0,0);
i = i + 1;
window.setTimeout(function(){draw(i)},100);
}
images[i].src = 'board.jpg';
}
</script>
</head>
<body onLoad="draw(0);">
<canvas id="myCanvas" width="1024" height="1024"></canvas>
</body>
</html>
Am I coding terribly? I've been changing ways of writing, trying not to use the eval(), etc., without success...
Thank you for your help, as always!
Ramon
PD- Sorry for my English!
Your code is really really strange. I've redone some of it to give you a better idea of how to go about coding this (without using eval, for one!)
http://jsfiddle.net/p6tXv/
Now there is a general function that will draw from a list of points that you give it (they are the same points you supplied).
You almost certainly don't want to use clip and a dark image, instead you should be drawing over the board with semi-transparent black.
I wrote the code in such a way that it will black out the spots. If you want to black out everything except the spots then you will have to write a pat that is a little more complex, but it shouldn't be that hard.
Just a comment on the coding style; the use of eval() to call your context.moveTo logic is all kinds of bad. Check Google for various reasons on "why eval is bad"; it's been mentioned elsewhere numerous times.
Instead of storing commands, store the coordinates as polygon-style objects, and iterate through the points in order to achieve the desired result.
I realize that this could be a simple demo written to illustrate a specific purpose, but if you're sharing the code at all, then you'll be sharing bad code. Consider revising.

<canvas> diamond/glass-like effect

I am working on a canvas animation, and one of the images is supposed to be a diamond.
Right now, I got as far as this:
ctx[0].beginPath();
ctx[0].moveTo(0,-80);
ctx[0].lineTo(-60,-130);
ctx[0].lineTo(-36,-160);
ctx[0].lineTo(36,-160);
ctx[0].lineTo(60,-130);
ctx[0].closePath();
ctx[0].fillStyle = "rgba(175,175,255,0.7)";
ctx[0].fill();
which draws a plain, light blue translucid diamond shape.
This is far too simple, but I'm having serious problems with the "color". I'm guessing something glass-like should do the trick, but I haven't found anything useful so far. I can add as many lines as needed, if it helps, but the color is my main problem.
This'll be pre-rendered, so long, complex code is not much of a problem. I'd rather not use images, though.
To sum up: I need a glass-ish effect for canvas. Any ideas?
I think what you are looking for in glass (or, presumably, diamond) is that it is not entirely transparent or flat. Instead, it reflects its surroundings and very slightly distorts its background. You can give the appearance of a reflection by means of a radial gradient. The distortion, however, is trickier. You could move and scale every pixel behind the object, but that would be incredibly difficult to implement, not to mention grindingly slow. Alternatively, you could implement a very fine, rapidly shifting gradient, which would give the appearance of a distortion of the pixels underneath, even though none is actually taking place.
Here is an implementation of a pane of glass with reflection and distortion.
<html>
<canvas id="canvas" style="position:fixed;">
</canvas>
<script type="text/javascript">
document.getElementById("canvas").height=window.innerHeight;
document.getElementById("canvas").width=window.innerWidth;
ctx=document.getElementById("canvas").getContext("2d");
textWidth=ctx.measureText("Hello World! ");
textWidth=Math.ceil(textWidth.width);
ctx.lineWidth=3;
targetWidth=Math.floor(window.innerWidth/textWidth)*textWidth;
for(i=0;i<500;i++)
{
ctx.fillText("Hello World! ",((i*textWidth)%(targetWidth)),(16*Math.floor((i+1)*textWidth/window.innerWidth)+16));
}
var glass = ctx.createRadialGradient(80,110,0,100,140,100);
for(i=0;i<=100;i++)
{
redComponent=Math.round(210-(i%11));
greenComponent=Math.round(245-(i%7));
blueComponent=Math.round(255-(i%5));
opacity=Math.round(((i%3)+1)*Math.sin(i/200*Math.PI)*1000)/3000;
glass.addColorStop(i/100,"rgba("+redComponent+","+greenComponent+","+blueComponent+","+opacity+")");
}
glass.addColorStop(1,"rgba(0,0,0,0)")
ctx.fillStyle=glass;
ctx.beginPath();
ctx.translate(100,0);
ctx.moveTo(100,100);
ctx.lineTo(187,150);
ctx.lineTo(137,237);
ctx.lineTo(50,187);
ctx.lineTo(100,100);
ctx.closePath;
ctx.fill();
ctx.stroke();
</script>
</html>
And the result is:

Using HTML5's globalCompositeOperation "xor" with shape and text elements in Chrome

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/

Categories

Resources