HTML5_NoJive
html5
See my javascript blog also
Text on a rect (put in group w/text coming after rect ...so its on top)
<svg width="2000" height="1000" viewBox="0 0 1000 600"></g>
<rect x="25" y="150" width="200" height="100" fill="lightblue" stroke="lightgreen" stroke-width="5"
transform="rotate(-45 100 100)"/>
<text x="55" y="220" font-family="Verdana" font-size="55" fill="blue" transform="rotate(-45 100 100)">Hello</text>
</g>
<svg>
Menu
<nav><a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Simple line (uses sin and cos and rounding for display text)
<!DOCTYPE html><html lang="en"><head><script type="text/javascript">function paintStuff(){
var htmlCanvas=document.getElementById('htmlCanvas');
var angleString=document.getElementById('angle').value;
var line_angleDeg=parseInt(angleString);
var line_angleRad=(angleString*Math.PI)/180;
if (htmlCanvas && htmlCanvas.getContext){
var ctx=htmlCanvas.getContext('2d');
ctx.font="18px Georgia";
ctx.lineWidth="4.0";
var startX=50; var startY=250; //start at bottom left edge
var line_hypotLen=300;
var deltaX=Math.abs(Math.cos(line_angleRad)*line_hypotLen);
var deltaY=Math.abs(Math.sin(line_angleRad)*line_hypotLen);
ctx.fillText("deltaX:"+deltaX.toFixed(1)+" deltaY:"+deltaY.toFixed(1),
ctx.canvas.width/3, ctx.canvas.height/2); //text near center
var divTxt=document.getElementById('out').innerHTML;
document.getElementById('out').innerHTML=divTxt+"<br/>"+angleString+" --> deltaX:"+deltaX.toFixed(1)+" deltaY:"+deltaY.toFixed(1);
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX+deltaX, startY-deltaY); //up and right
ctx.closePath();
ctx.stroke();
}
}
</script></head>
<body><h1>Canvas Bar Chart</h1>
Enter numeric angle in degrees: <input type='text' id='angle'/>
<input type='button' onclick='paintStuff();' />
<canvas id="htmlCanvas" width="400" height="400" style="margin-left:80px;"></canvas>
<div id='out'>-</div>
</body></html>
Simple graphics (text, lines, rectangles, circles)
<!DOCTYPE html><html lang="en"><head><script type="text/javascript">function paintStuff(){
var htmlCanvas=document.getElementById('htmlCanvas');
if (htmlCanvas && htmlCanvas.getContext){
var context=htmlCanvas.getContext('2d');
drawStuff(context, htmlCanvas.width, htmlCanvas.height);
}
}
function drawStuff(ctx, canvasWidth, canvasHeight) {
ctx.font="20px Georgia";
ctx.fillText("This text is Behind", 50, 120); //x,y
ctx.lineWidth="4.0";
drawLine(ctx, 60, 60, 90, 90); //start pt, end pt
ctx.fillStyle="blue";
drawRectangle(ctx, 1, 1, 50, 100, true); //right, down, w, h, fill_or_not
ctx.fillStyle="yellow";
drawRectangle(ctx, 11, 11, 50, 100, true); //right, down, w, h, fill_or_not
drawCircle(ctx, 141, 111, 90); //right, down, w, h, fill_or_not
ctx.fillStyle="red";
ctx.fillText("Front", 10, 70); //x,y
//triangle via path
ctx.beginPath();
ctx.moveTo(40, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
//Paint a Path2D custom shape
var path=new Path2D();
path.moveTo(220, 60);
path.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.fillStyle="blue";
ctx.fill(path);
ctx.stroke(path);
function drawCircle(ctx, centerX, centerY, radius){
ctx.beginPath();
ctx.arc(centerX, centerY, radius,
0*Math.PI, //angle starts at right
2*Math.PI); //angle ends
ctx.stroke();
}
function drawLine(ctx, startx, starty, endx, endy) {
ctx.beginPath();
ctx.moveTo(startx, starty);
ctx.lineTo(endx, endy);
ctx.closePath();
ctx.stroke();
}
function drawRectangle(ctx, x, y, w, h, fill) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
ctx.stroke();
if(fill)ctx.fill();
}
</script></head>
<body onLoad="paintStuff();"><h1>HTML 5 Canvas Fun</h1>
<canvas id="htmlCanvas" width="800" height="400" style="margin-left:80px;"></canvas>
</body></html>
Move a box to the right slowly
<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var newX=0;
function doIt(){
setInterval(
function(){ newX=newX+5;
$('#rect1').attr('x', newX);
$('#text1').attr('x', newX+20);
$('#text1').text('x='+newX);
$('#msg').text(newX);
}, 1000);
}</script>
</head>
<body onload='doIt();'>
<svg width="90%" height="90%">
</g>
<rect id="rect1" x="10" y="10" width="90" height="90" fill="lightblue" />
<text id="text1" x="30" y="50" ></text>
</g>
</svg>
<div id="msg"></div>
</body></html>
SVG 4 transformation functions:
translate()
rotate()
scale()
skew()
matrix()
translate() moves a shape. (pass x & y)
translate(50,25) moves shape
50 units along x-axis and
25 units along y-axis
<rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)" />
Rotate a shape around a point 0,0.
<rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;"/>
<rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" />
scale() shape size (affects the grid size also)
a rectangle positioned at 10,10 w/width=20 & height=30, scaled by a factor of 2
appears at 20,20 w/width=40 & height=60
<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)" />
scale shape by
factor of 2 along the x-axis, and a
factor of 3 along the y-axis:
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)" />
skewX() and skewY() skew given axis according to a certain degrees/angle
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
<rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" />
matrix transformations:
a c e
b d f
0 0 1
Only the first 6 values can be specified: transform="matrix(a,b,c,d,e,f)"
ex: Translate
1 0 tx
0 1 ty
0 0 1
matrix(1,0,0,1,tx,ty)
Rotation of angle a:
cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1
matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
Note: vals for cos(a) and sin(a) have to be precomputed before being inserted into the matrix.
Scale
sx 0 0
0 sy 0
0 0 1
matrix(sx,0,0,sy,0,0)
skew along x-axis:
1 tan(a) 0
0 1 0
0 0 1
matrix(1,0,tan(a),1,0,0)
The tan(a) value has to be precomputed before being inserted into the matrix() function.
skew along y-axis:
1 0 0
tan(a) 1 0
0 0 1
matrix(1,tan(a),0,1,0,0)
mimic a simple translate function:
<rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/>
<rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)" />
save restore transform
<!DOCTYPE html><html>
<body onload='foobar();'>
<canvas id="myCanvas" width="600" height="550" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function foobar(el) {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// ctx.fillStyle="black";
ctx.fillText("hello", 10,10);
ctx.save();
ctx.transform(
1, //scaleX
0.0,-0.0, //skewX,Y
1, //scaleY
70,10 //moveX,Y
);
ctx.rotate(90 * Math.PI / 180);
ctx.fillText("hello", 20,20);
ctx.restore();
}
</script></body></html>
Surface with 50% Transparency (via ctx.globalAlpha = 0.5)
<!DOCTYPE html><html lang="en"><head><script type="text/javascript">
var prevLeftX, prevLeftY;
function paintStuff(){
var angleString =document.getElementById('
var line_angleDeg =parseInt(angleString);
var line_angleRad =(angleString*Math.PI)/180;
var midX=250, midY=500;
var itemWidth=100; barOffsetY=40;
var line_hypotLen=20;
var deltaX=Math.cos(line_angleRad)
var deltaY=Math.sin(line_angleRad)
var htmlCanvas=document.
if (htmlCanvas && htmlCanvas.getContext){
var ctx=htmlCanvas.getContext('2d'
ctx.lineWidth="5.0";
var barSeriesIdx, InSeriesBarIndex, colorFront, colorSides;
InbarSeriesIndex=7; SeriesIndex=0;
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
InbarSeriesIndex=7; SeriesIndex=1; prevLeftX=0, prevLeftY=0;
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
InbarSeriesIndex=7; SeriesIndex=2; prevLeftX=0, prevLeftY=0;
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
drawIt(ctx, SeriesIndex, midX-(barOffsetY*
}
}
function drawIt(ctx, SeriesIndex, frontBottomLeftX, frontBottomLeftY, deltaX, deltaY, itemWidth, itemColor, barVal){
var offsetBetweenSeries=itemWidth+
ctx.fillText("
ctx.globalAlpha = 0.5;
ctx.beginPath();
ctx.moveTo( (frontBottomLeftX)+(
ctx.lineTo( (frontBottomLeftX)+(
if(prevLeftX>0){
ctx.beginPath();
ctx.moveTo( prevLeftX, prevLeftY ); //start@prevLeft
ctx.lineTo( (frontBottomLeftX)+(
ctx.lineTo( (frontBottomLeftX)+(
ctx.lineTo( prevLeftX+itemWidth, prevLeftY ); //to prevRight
ctx.fill(); ctx.closePath();
}
ctx.stroke();
prevLeftX=(frontBottomLeftX)+(
prevLeftY=(frontBottomLeftY)-
}
</script></head>
<body onLOAD='paintStuff();' ><h1>Surface</h1>
Enter numeric angle in degrees: <input type='text' value='45' id='angle'/>
<input type='button' onclick='paintStuff();' />
<canvas id="htmlCanvas" width="800" height="700"></canvas>
</body></html>
Comments
Post a Comment