HTML 5 گرافیک دو بعدی در

HTML 5 گرافیک دو بعدی در

• 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 followingcommands 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 samplegame wite by js