HTML and CSS Reference
In-Depth Information
context.lineTo(200,50);
context.lineTo(380,10);
context.closePath();
context.stroke();
context.fill();
var lg = context.createLinearGradient(10, 150, 200, 200);
lg.addColorStop(0, "#B03060");
lg.addColorStop(0.5, "#4169E1");
lg.addColorStop(1, "#FFE4E1");
context.fillStyle = lg;
context.beginPath();
context.rect (10, 150, 200, 200);
context.fill();
var rg = context.createRadialGradient(50,50,10,60,60,50);
rg.addColorStop(0, "#A7D30C");
rg.addColorStop(0.9, "#019F62");
rg.addColorStop(1, "rgba(1,159,98,0)");
context.fillStyle = rg;
context.beginPath();
context.fillRect(0,0,130,230);
context.beginPath();
context.lineTo(250,150);
context.lineTo(330,240);
context.lineTo(410,150);
context.stroke();
}
</script>
</head>
<body>
<h1> Simple Shapes on canvas Example </h1>
<canvas id="canvas" width="500" height="500">
<strong> Canvas Supporting Browser Required </strong>
</canvas>
</body>
</html>
O NLINE http://htmlref.com/ch2/canvaslinesandshapes.html
Applying Some Perspective
As the context is specified as 2d , it is no surprise that everything you have seen so far has
been two-dimensional. It is possible to add some perspective by choosing proper points and
shades. The 3D cube shown in Figure 2-3 is created using nothing more than several
moveTo() and lineTo() calls. The lineTo() call is used to create three sides of the cube,
but the points set are not straight horizontal and vertical lines as we see when we make 2D
squares. Shading is applied to give the illusion of dimensionality because of the application
of a light source. While the code here is pretty simple, you can see that using canvas
Search WWH ::




Custom Search