Monday, 27 November 2017

HTML Google Maps

HTML Google Maps

Google Maps allows you to display maps on your web page:

Use ctrl + scroll to zoom the map

Map

Satellite

A Basic Web Page

Example

<!DOCTYPE html>

<html>

<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>

<html>

Yourself Try

Set the Map Size

Set the size of the map:

Example

<div id="map" style="width:400px;height:400px">
Yourself Try

Create a Function to Set The Map Properties

Example

function myMap() {

    var mapOptions = {

        center: new google.maps.LatLng(51.5, -0.12),

        zoom: 10,

        mapTypeId: google.maps.MapTypeId.HYBRID

    }

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

}

Yourself Try

Add the Google Maps API

At last, demonstrate the guide on the page!

The functionality of the guide is given by a JavaScript library situated at Google. Add a content to allude to the Google Maps API with a callback to the myMap function:

Example

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Yourself Try

HTML5 SVG

HTML5 SVG

What is SVG?

SVG remains for Scalable Vector Graphics

SVG is utilized to characterize designs for the Web

SVG is a W3C proposal

The HTML <svg> Element

The HTML <svg> component is a compartment for SVG designs.

SVG has a few strategies for drawing ways, boxes, circles, content, and realistic pictures.

Browser Support

The numbers in the table specify the first browser version that fully supports the <svg> element.

SVG Circle

Example

<!DOCTYPE html>

<html>

<body>

<svg width="100" height="100">

  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

</body>

</html>

Yourself Try

SVG Rectangle

Example

<svg width="400" height="100">

  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>

</svg>

Yourself Try

SVG Rounded Rectangle

Example

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Yourself Try

SVG Star

Example

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Yourself Try

SVG Logo

Example

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

Yourself Try

HTML Canvas

desing21:02Html, HTML Graphics No comments:

HTML5 Canvas

What is HTML Canvas?

The HTML <canvas> component is utilized to draw designs, on the fly, by means of JavaScript.

The <canvas> component is just a holder for illustrations. You should utilize JavaScript to really draw the illustrations.

Canvas has a few strategies for drawing ways, boxes, circles, message, and including pictures.

Canvas Examples

Here is an example of a basic, empty canvas:

Example

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

</canvas>

Yourself Try

Draw a Line

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Yourself Try

Draw a Circle

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Yourself Try

Draw a Text

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Yourself Try

Stroke Text

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Yourself Try

Draw Linear Gradient

Example

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

// Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradientctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Yourself Try

Draw Circular Gradient

Example

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

// Create gradientvar grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradientctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Yourself Try

Freelancign web design and Graphics design

Monday, 27 November 2017

HTML Google Maps

A Basic Web Page

Example

Set the Map Size

Set the size of the map:

Example

<div id="map" style="width:400px;height:400px"> Yourself Try

Create a Function to Set The Map Properties

Example

Add the Google Maps API

Example

HTML5 SVG

What is SVG?

The HTML <svg> Element

Browser Support

SVG Circle

Example

SVG Rectangle

Example

SVG Rounded Rectangle

Example

SVG Star

Example

SVG Logo

Example

HTML5 Canvas

What is HTML Canvas?

Canvas Examples

Example

Draw a Line

Example

Draw a Circle

Example

Draw a Text

Example

Stroke Text

Example

Draw Linear Gradient

Example

Draw Circular Gradient

Example

Pages

Labels

Blog Archive

Recent Posts

Web Design Tutorial

Theme Support

<div id="map" style="width:400px;height:400px">
Yourself Try