---

Simply Easy Learning HTML5 - pdf

Contents

This tutorial will guide you through the following steps:

---

pdf Simply Easy Learning HTML5

---

HTML5 - SVG Circle

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" />
</svg>

HTML5 - SVG Rectangle

<svg width="200" height="100">
<rect width="200" height="100" stroke="red" stroke-width="5" fill="blue" />
</svg>

HTML5 - SVG Line

<svg height="200">
<line x1="0" y1="0" x2="200" y2="100" stroke="blue" stroke-width="5"/>
</svg>

HTML5 - SVG Ellipse

<svg height="200"> <ellipse cx="110" cy="55" rx="100" ry="45" stroke="red" stroke-width="5" fill="blue" />
</svg>

HTML5 - SVG Polygon

<svg height="200"> <polygon points="20,100 300,70, 120,50" stroke="red" stroke-width="5" fill="blue" /> </svg>

HTML5 - SVG Polyline

<svg height="200">
<polyline points="10,10 20,80 100,90 80,80 80,100" fill="blue" />
</svg>

HTML5 - SVG Gradients

<svg height="200">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<rect x="10" y="10" height="150" width="150" style="stroke:red; stroke-width:5; fill: blue; fill:url(#gradient)" />
</svg>

HTML5 – Canvas

CANVAS <canvas> is element in HTML5 that allows us to draw graphics and animations on web browsers using JavaScript.


<canvas id="myCanvas" height="200" width="300"></canvas>


<script>
window.addEventListener('load', function () {
var img = new Image,
ctx = document.getElementById('myCanvas').getContext('2d');
img.src = 'https://itpresent.com/web/tutorials/pdf/images/loves.png';
img.addEventListener('load', function () {
var interval = setInterval(function() {
var x = 0, y = 20;
return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x, y);

x += 1;
if (x > ctx.canvas.width) {
x = 0;
}
};
}(), 1000/150);
}, false);
}, false);
</script>

---

pdf Simply Easy Learning HTML5

---

Privacy Policy

---