HTML5 form tags and canvas tag

HTML5 form tags and canvas tag

Ritratto di PONRAM

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 new
Ultimo contenuto
Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione
Ritratto di Mohamed Ali A.

some examples please !

Ritratto di PONRAM

wil try asap

Ritratto di nakhli  m.

yes we need some examples to be more clear :) 

Ritratto di PONRAM

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>

Ritratto di PONRAM

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.

Ritratto di JudLup Luna

Hi Ponram thid tutorial is very nice:

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

JudLup Luna

Accedere per lasciare un commento.