HTML5 form tags and canvas tag

HTML5 form tags and canvas tag

In HTML5 the user can avail the feature of canvas tag, that used to draw graphics and all.

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

Form Tags

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

7 post / 0 nuovi
Ultimo contenuto
Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione

some examples please !

wil try asap

yes we need some examples to be more clear :) 

A canvas is a rectangular area on an HTML page

normally the <canvas> element has no border and no content.

<canvas id="pon_canvas" width="200" height="100"></canvas>

Always specify an id attribute to bepointed to in a script), and a width and height attribute to define the size of the canvas.

to have a border around your canvas, use the style attribute:

Example <canvas id="pon_canvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

java code and canvas for drawing inside canvas

<script>
var c=document.getElementById("pon_canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

let me explain this

var c=document.getElementById("pon_canvas");

Then, call its getContext() method (you must pass the string "2d" to the getContext() method):

var ctx=c.getContext("2d");

The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

The next two lines draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).

The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

Hi Ponram thid tutorial is very nice:

http://www.w3schools.com/html/html5_canvas.asp

JudLup Luna

Lascia un commento

Eseguire l'accesso per aggiungere un commento. Non siete membri? Iscriviti oggi