نشست ۱۴۲ شیرازلاگ با ارائه رحیم فیروزی

2. 2D in HTML5
‫الرحیم‬ ‫الرحمن‬ ‫الله‬ ‫بسم‬

3. Coordinate

4. 2D in web
● SVG
– Vector base
– Xml
● Canvas
– Raster base
– Only by code

5. SVG
<svg width="100" height="100">
<!-- other tag -->
browser dose n’t support SVG
</svg>

6. SVG
● Basic
– Line
– Rectangle(rect)
– Circle
– text
– ellipse
– polygon
– Polyline
– a

7. SVG
<rect x="2" y="2" width="50" height="50" style="fill:red;stroke-width:3;stroke:black" />
<line x1="55" y1="0" x2="100" y2="50" style="stroke:green;stroke-width:2" />
<circle cx="125" cy="25" r="23" stroke="black" stroke-width="3" fill="rgb(0,0,150)" />
<ellipse cx="175" cy="25" rx="20" ry="12" style="fill:yellow;stroke:purple;stroke-width:2" />
<polygon points="200,10 240,30 210,40" style="fill:lime;stroke:purple;stroke-width:1" />
<polyline points="250,10 290,30 250,40" style="fill:hsl(170,50%,50%);stroke:purple;stroke-width:1" />
<text x="0" y="15" fill="rgba(25,125,253,0.5)">I love SVG!</text>

8. SVG path
The following commands are available for path data:
M = moveto x1 y1
L = lineto x1 y1
H = horizontal lineto x
V = vertical lineto y
C = curveto a1 a2 b1 b2 x1 y1
S = smooth curveto b1 b2 x y
Q = quadratic Bézier curve a1 a2 ,x1 y1
T = smooth quadratic Bézier curveto x1,y1
A = elliptical Arc
Z = closepath
Lowercase command names mean use relative
<path d="M 10 10 h 75 v 50 l 50 0 c 25 -25, 30 30 ,50 50 s 0 -50 ,50 50 l -150 50 z" fill="red" />

9. SVG
● Advance
– G
– Filter
– Linear Gradient,Radial Gradient
– …

10. Canvas
<canvas id="myCanvas" width="200" height="100">
browser dose n’t support Canvas
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
</script>

11. <script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(100, 20);
// line 1
context.lineTo(200, 160);
// quadratic curve
context.quadraticCurveTo(230, 200, 250, 120);
// bezier curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
// line 2
context.lineTo(500, 90);
// context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
//context.rect(188, 50, 200, 100);
//context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script>

12. Stroke,fill
● Fill
context.fillStyle = '#8ED6FF'; // color ,Gradient,pattern
context.fill();
● stroke
context.lineWidth = 5;
context.strokeStyle = 'blue'; // ? :)
context.stroke();

13. ● Linear Gradient
– var grd=context.createLinearGradient(x1,y1,x2,y2);
– grd.addColorStop(0-1,color);
● Radial Gradient
– var grd=context.createRadialGradient(x,y,r,x1,y1,r1);
– grd.addColorStop(0-1,color);
● Pattern
– var pattern = context.createPattern(imageObj,mode); //
repeat, repeat-x, repeat-y,no-repeat.

14. Canvas Translate
● context.translate(dx,dy);
● context.scale(dx, dy);
● context.rotate(d);
● context.transform(a, b, c, d, e, f);
● context.save(); / context.restore();

15. other
● Shadow
– context.shadowColor = '#999';
– context.shadowBlur = 20;
– context.shadowOffsetX = 15;
– context.shadowOffsetY = 15;
● context.globalAlpha = 0.5;
● context.clip();

16. ?

17. ● Analyze sample game wite by js