HTML5 Case Study

1. Draw a Tangram.

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "Utf-8" />        <title>Draw Tangram</title>    </Head>    <Body>        <CanvasID= "Canvas"style= "border:1px solid #aaa:d isplay:block:margin:50px Auto:">        </Canvas>        <Script>        //Programming Idea: Use an array to represent all of these segmented shapes, and the graphs in the array are represented by dots.         varTangram=[{p:[{x:0, y:0},{x: -, y:0},{x: -, y: -}],color:"#caff67"}, {p:[{x:0, y:0},{x: -, y: -},{x:0, y: -}],color:"#67becf"}, {p:[{x: -, y:0},{x: -, y: -},{x: -, y: -},{x: -, y: $}],color:"#caff67"}, {p:[{x: -, y: $},{x: -, y: -},{x: -, y: -}],color:"#f95la"}, {p:[{x: -, y: -},{x: -, y: -},{x: -, y: -},{x: $, y: -}],color:"#a594c0"}, {p:[{x: $, y: -},{x: -, y: -},{x:0, y: -}],color:"#fa8ccc"}, {p:[{x: -, y: -},{x: -, y: -},{x: -, y: -}],color:"#f6ca29"}] window.onload=function(){                //tool to get paint Vanvas                varCanvas=document.getElementById ('Canvas'); Canvas.width= -; Canvas.height= -; varContext=Canvas.getcontext ('2d'); //Loop Gets the number of array Tangram, trangram[] number of arrays                 for(varI=0; I<Tangram.length;i++) {Draw (tangram[i],context);//invokes a drawing drawing. Tangram[] for the first few graphs, the context indicates that a paint stroke was obtained.                 }            }            //draws a graphic that piece represents the graph {p:[{},{},c],color: ""},CXT represents a paint brush.             functionDraw (PIECE,CXT) {Cxt.beginpath ();//Start PathCxt.moveto (piece.p[0].x,piece.p[0].y);//the first point of a graph                     for(varI=1; I<Piece.p.length;i++) {Cxt.lineto (PIECE.P[I].X,PIECE.P[I].Y); } cxt.closepath ();//End PathCxt.fillstyle=Piece.color;//Fill ColorCxt.fill (); //draw a thick line boxCxt.strokestyle="Red"; Cxt.linewidth=3;            Cxt.stroke (); }                    </Script>    </Body></HTML>

View Code

HTML5 Case Study