Wednesday, January 30, 2013
Monday, January 28, 2013
Modernizer
Modernizer.
One thing you’ve probably notice that when you want to detect browser support for an API, there is no uniform way of doing so; in fact, almost every API is detected in a different way. For geolocation, for instance, we look for the geolocation object as a property of the navigator object, while for webstorage we check to see if localStorage is defined in the window object, and for video we check to see if we can create a video element in DOM, and so on. Surely there’s a better way?
Modernizr is an open source JavaScript library that provides a uniform interface for detecting browser support. Modernizer takes care of all the details of the different means of detection, even factoring in all the edge cases around older browsers. You’ll find the Modernizr home page at http://www.modernizr.com/
Modernizr has gained a lot of developer support so you’ll see it used widely around the Web. We highly recommend it.Here’s an example of detecting for geolocation, web storage and video, all in a consistent manner. Including Modernizr in your page
To use Modernizr, you need to load the JavaScript library into your page. To do that you first visit the Modernizer site at http://www.modernizr.com/download/, which allows you to custom configure a library that contains just the detection code you need (or you can always grab everything while you’re there). After you’ve done that, stash the library in a file of your choice and load it into your page (visit Modernizr’s web site for addition tutorials and documentation on best practices for doing this).
Download and how to attached to web page.
Firs way:
Step 1: Modernizer is a jquery library.You may download production version from http://modernizr.com/download/Step 2: Now select all of the option you want to detect support of browsers.I recommmand all checked or toggle all of the three css3,Html5 and Misc.
Step 3: Click Generate Button.Remember it only general code according your checked options.
Step 4: Click Download button.Then a javascript file like modernizr.custom.02852.js downloaded your PC.
Step 5: Use this javascript file in your head tag after your stylesheet.
<script type="text/javascript" src="js/modernizr.custom.02852.js"></script>
Here my downloaded file in under js folder.But you can put wheter you want and it may be same directory if you want.
Second way:
Just use these url in src.No need to download modernizer but you need internet connection to use it.<script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
I recommand use First way when you are practise your own computer and use second way when you use for an website which is running a real server.
How modernizer works for CSS3.
Modernizer actually helps you to make style both supported or not supported browsers.Suppose you want to use box-shadow which is a new features of CSS3.Most of the old Browser does not support css3 so you have to use a fallback for them.Modernizer add a class in <html> tag if browser support box-shadow then it will add a class like <html class="boxshadow">. if browser does not support css3 box-shadow then it will add a class in html like <html class="no-boxshadow">.Like so for border-radius it will add no-borderradius class in your html tag.If support just add borderradius class.
Notice: Modernizer add class for support just the property name with no spaces between the words.It add no before non supporting property like no-borderradius.
Remember one thing modernizer add class not the browsers.
Lets Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>modernizer use for css3</title>
<style type="text/css">
/*If browser support border-radius then modernizer add a borderradius class in html tag.so these style will apply because older browser have not found any borderradius class so it skip it */
.borderradius #box{
-moz-border-radius:25px;
border-radius:15px;
box-shadow:1px 1px 4px #003366;
height:400px;
width:400px;
color:#fff;
background: -moz-linear-gradient(top, #00020c, #0cf6f3); /* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(#00020c), to(#0cf6f3)); /* Safari 4+, Chrome */
background: linear-gradient(to bottom, #00020c,#0cf6f3); /* W3C */
}
/* older browser will style these*/
#box{
background-color:#0cf6f3;
height:400px;
width:400px;
border:1px outset #333;
}
</style>
<script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
</head>
<body>
<header>
</header>
<section>
<div id="box">
Hi i am in a test moood.
</div>
</section>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>modernizer use for css3</title>
<style type="text/css">
/*If browser support border-radius then modernizer add a borderradius class in html tag.so these style will apply because older browser have not found any borderradius class so it skip it */
.borderradius #box{
-moz-border-radius:25px;
border-radius:15px;
box-shadow:1px 1px 4px #003366;
height:400px;
width:400px;
color:#fff;
background: -moz-linear-gradient(top, #00020c, #0cf6f3); /* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(#00020c), to(#0cf6f3)); /* Safari 4+, Chrome */
background: linear-gradient(to bottom, #00020c,#0cf6f3); /* W3C */
}
/* older browser will style these*/
#box{
background-color:#0cf6f3;
height:400px;
width:400px;
border:1px outset #333;
}
</style>
<script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
</head>
<body>
<header>
</header>
<section>
<div id="box">
Hi i am in a test moood.
</div>
</section>
</body>
</html>
Output of following Code:
Hi i am in a test moood.
How to detect support for html5 and retated api.
Once you’ve got Modernizr installed, detecting HTML5 elements and
JavaScript APIs gets a lot easier and more straightforward:
if (Modernizr.geolocation) {
write your code about geolocation because only supported browser will execute your code.Other skip these codes.
}
JavaScript APIs gets a lot easier and more straightforward:
if (Modernizr.geolocation) {
write your code about geolocation because only supported browser will execute your code.Other skip these codes.
}
Here’s an example of detecting for geolocation, web storage and video, all in a consistent manner
if (Modernizr.localstorage) {
Do here what ever you want to do with local storage.This will not disturb unsupported browser.
}
if (Modernizr.video) {
//Your code about video goes here
}
Note: Modernizr goes far beyond simple API detection and can also detect support for CSS features,
video codecs and many other things. So, check it out!
Related Topics:
Sunday, January 27, 2013
Friday, January 25, 2013
Web Sql
Web Sql
What is web sql:
We can store data in browser by using web storage API.But we can not access these storage properly.So W3c bring another specification called WEB SQL database.By this we can perform sql/database operation on browser that ill reduce the server activity and thus improve website browsing speed.Web SQL database API is not part of Html 5 specification.But It has nie features and by using these feature we can enhance our web site developing experienc.
It build with SQLite(3.1.19).
Those have a background of server side database will surprise that is it really possible to work with database with client side.Yes it is possible.
Browser Support:
Until now it will support Google Chrome,Safari,Opera,and Mozilla Firefox by add-ons support.NB:W3c has stop working on these specification.
HTML 5 syllabus
VIDEO TUTORIAL
Related Topics
Friday, January 18, 2013
web storage
Web Storage
Before start,What is storage? It means to save or store something in a place.So web storage means to store data on somewhere.Typically data is stored in database.But web page is run by browser and it have no capacity to hold data.Web storage means store data in browser rather than database.Previously web developer do that kind of work with the help of cookies but it have many limitation such as it can store only 4 kb,communicate to server every HTTP request and many which slow the web site performance.On the other hand web Storage do not communicate with server until it have been called.It can store a large amount of data on the browser.The data may infinitely store and there have no expire date.There are two kind of web storage are available on this API.
1.localStorage
2.sessionStorage
Difference between them
Both of them run in same function and rules but persistence duration is vary from one to another.Local Storage is like permanent web storage and it will remain where or not browser closed.But session storage only stay until a window is close.If window close then session storage will destroy.
Importance of Web storage:
For many reason web storage is very helpful.When a user filling up a long form for purchase something during that time if he unable to post it to server for internet connection problem or unexpectedly his or her browser restart or resfresh.Then he or she might have filled up that from from scratch.That would be disappoint for user.But if we give him his data back when he come back this is very helpful and user friendly.
We can use web storage in shopping cart each time user add a product it goes to database virual table and store there until he purchased or close it.But this sometime slow down website speed and cause very much presser to server.So we can handle this kind of small thing in browser.
Functionality of Web storage
Key pair:
Browser store data on key pair value.Key means name of something and pair means its value.Suppose if you want to store user name on web storage during form fill up.Then name would be the key and its value would be 'Osman' or input value.
save:
There are three ways to save data on web storage.Like
window.localStorage.setItem(key,value);
(like window.localStorage.setItem("name","Tuhin");)
window.localStorage.key="value";
window.localStorage[key]="value";
Here localStorage is a child of window object.Among the above three method i prefer to use the first one because it is casual.
Restore Item
You can restore any saved item from web browser.Remember local storage is browser own member space.So if you store something on Google Chrome on your pc then this data would not have in FireFox browser.
window.localStorage.getItem(key);
if we write window.localStorage.getItem("name") here name key is stored previously so we want to restore it and use in web page.It definately give us the value it has.
Check Length:
You can check how any key pair have in web storage by
window.localStorage.length;
This will give you numeric number.
Remove item:
You can delete any individual item from web storage by following method.
window.localStorage.removeItem(key);
if we give name in key then it will remove name key from web storage.
Clear All
We can clear all of the key value from web storage.
window.localStorage.clear();
Practical Project:
This code is Jquery Based.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form_input_storage</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<style type="text/css">
#holder{
width:500px;
height:auto;
background-color:#6CF;
padding:20px;
}
label{
width:150px;
display:inline-block;
}
p{
font-family:"Courier New", Courier, monospace;
border-bottom:1px dashed #900;
}
</style>
<script type="text/javascript" >
window.onload=function(){
if(window.localStorage)
{
/*var name=document.getElementById("name");
name.addEventListener("blur",function(){
localStorage.name=name.value;
}); */
$("#name").on("blur",function(){
localStorage.name=$(this).val();
});
window.localStorage.name;
if(window.localStorage.name){
document.getElementById("name").value=window.localStorage.getItem('name');
}
//This is form email address;
$("#email").on("blur",function(){
localStorage.email=$(this).val();
});
if(window.localStorage.email){
document.getElementById("email").value=window.localStorage.getItem('email');
}
//This is for age
$('#age').on("blur",function(){
localStorage.age=$(this).val();
});
if(localStorage.age){document.getElementById("age").value=window.localStorage.getItem('age'); }
//CIty
$('#city').on("blur",function(){
localStorage.city=$(this).val();
});
if(localStorage.city){document.getElementById("city").value=window.localStorage.getItem('city'); }
//For telephone Number
$('#telephone').on("blur",function(){
localStorage.telephone=$(this).val();
});
if(localStorage.city){document.getElementById("telephone").value=window.localStorage.getItem('telephone'); }
//For web site Url
$('#web').on("blur",function(){
localStorage.web=$(this).val();
});
if(localStorage.city){document.getElementById("web").value=window.localStorage.getItem('web'); }
//For Comments
$('#comment').on("blur",function(){
localStorage.comment=$(this).val();
});
if(localStorage.city){document.getElementById("comment").value=window.localStorage.getItem('comment'); }
}
else
{
alert("sorry your browser does not souuprt local storage")
}
}
</script>
</head>
<body>
<div id="holder">
<form action="#" name="check" method="post">
<p><label>Name</label><input type="text" name="name" id="name" value="" /></p>
<p><label>Email Address</label><input type="email" name="email" id="email" /></p>
<p><label>Age</label><input type="number" name="age" id="age" /></p>
<p><label>City</label><input type="text" name="city" id="city" /></p>
<p><label>Telephone Number</label><input type="tel" name="telephone" id="telephone" /></p>
<p><label>Website</label><input type="url" name="url" id="web" /></p>
<p><label>Comments</label><textarea id="comment" name="com"></textarea></p>
<input type="submit" name="action" value="SEND" " />
</form>
</div>
</body>
</html>
Tips:Remeber web storage only work on server you must to run this file from a server it would be real server or localhost server like Xampp or Wamp.
This Code is Javascript Based
This Code is Javascript Based
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web storage</title>
<style type="text/css">
#container{
background-color:#CCF;
width:600px;
height:500px;
padding:25px;
}
label{
display:block;
width:130px;
float:left;
}
p{
border-bottom:1px dashed #FFF;
}
</style>
<script type="text/javascript">
function saving(){
var name=document.getElementById("name").value;
var email=document.getElementById("email").value;
window.localStorage.setItem(name,email);
}
function counts()
{
var cou=window.localStorage.length;
//alert("There are "+cou+" items on your local storage");
document.getElementById("showcount").innerHTML="There are "+cou+"items on your local storage";
}
//clear all of the browser data from local storage
function clearAll()
{
var clear=window.localStorage.clear();
document.getElementById("showcount").innerHTML="You successfully deleted all of the data from local storage."
}
//for delete individual item from local storage
function deleteOne(){
var del=document.getElementById("name").value;
window.localStorage.removeItem(del);
document.getElementById("showcount").innerHTML="You have successfully deleted "+del+" information from local storage";
}
function shows()
{
var cnt=window.localStorage.length;
var rst="The List is <br ><ul>";
for( var i=0;i<=cnt;i++)
{
var key=window.localStorage.key(i);
var val=window.localStorage.getItem(key);
rst+="<li>"+key+"||"+val+"</li>";
}
rst+="</ul>";
document.getElementById("showMsg").innerHTML=rst;
}
function onLoad() {
document.getElementById("store").addEventListener("click", saving, true);
document.getElementById("count").addEventListener("click", counts, true);
document.getElementById("clear").addEventListener("click", clearAll, true);
document.getElementById("delete").addEventListener("click", deleteOne, true);
document.getElementById("show").addEventListener("click", shows, true);
}
window.addEventListener("load", onLoad, true);
</script>
</head>
<body>
<div id="container">
<p>
<label>Name:</label><input type="text" name="name" id="name">
</p>
<p>
<label>Email address:</label><input type="email" name="email" id="email">
</p>
<p align="center">
<input type="button" id="store" value="Store" />
<input type="button" id="count" value="Counts" />
<input type="button" id="clear" value="Clear" />
<input type="button" id="delete" value="Delete" />
<input type="button" id="show" value="Show All" />
</p>
<div id="showMsg">
</div>
<p id="showcount"></p>
</div>
</body>
</html>
Web Storage Video Tutorial
Other Resource about Web storage
Thursday, January 17, 2013
Slideshow by using canvas
slideShow:
HatirJheel Dhaka,Bangladesh
s<script type="text/javascript"> //var imgPath=["images/bandarban.jpg","images/Bangladesh-teagarden.jpg","images/hill_tree.jpg","images/abc.jpg"];
var imgPath=["http://www.thedailystar.net/photo/2013/01/10/2013-01-10__ft05.jpg","http://www.daily-sun.com/admin/news_images/378/image_378_81765.jpg","http://farm9.staticflickr.com/8079/8337298091_575f7676de.jpg","http://www.newagebd.com/newspic/e980ddcb76a6fe7a72c32cfb3485034620130102.jpg"];
var img=document.createElement("img");
var currImg=0;
window.onload=function()
{
var can=document.getElementById("mc");
var mc=can.getContext("2d");
img.setAttribute('width','500');
img.setAttribute('height','400');
changeimg();
setInterval(changeimg,3000);
function changeimg(){
img.setAttribute('src',imgPath[currImg++]);
img.onload=function()
{
if(currImg>=imgPath.length)
{currImg=0; }
mc.drawImage(img,0,0,500,400);
}
}
}
</script>
<canvas id="mc" width="500" height="400px">
Sorry your browser does not support canvas tag.Upgrade to latest version pls
</canvas>
Description:
Slideshow is a collection of images.So for that reason we take a array which contains all of our images.Then we create a image tag by using createElement () method because we have to use image tag to show image on canvas and then dynamically change the source attribute of that image tag.
variable currImg is the array index value.If it 0 then show the first image on that array and then increase by one.Thus cause the image change.
Then within window.onload function we set the previously created image width and height by using javascript setAttribute method.setInterval function will execute every 3 seconds later and execute changeimg
function.Each time change image function execute variable currImg value increaseby one.
Look carefully in changeimg function we set the source of image tag. and we give array imgPath(our image container) and in the index [] we call our currImg variable which value will increase each time the changeimg function execute.
So first time imgPath index is 0 and in the canvas it show the first image after 3 second later array index value would be 1 and it will show its second image.
But when currImg variable value is greater than total array length then we set the currImg value 0 so its again start changing the index value of arry.Otherwise slideshow will stop when all of the array's value is shown.
Wednesday, January 16, 2013
Animation
Animation:
In canvas you can do anything if you have logic.Animation is very simple to do.Two thing keep in mind before you do anyting about animation first of all what thing or object you are going to animate.Second a function which will change the position every few secod.setInterval function
do the animation for you and it takes two parameter.FIrst is which thing will animate and duration means duration of each animation to another.10 second means every ten second later it will execute the animate object.
Lets Code:
<script type="text/javascript" language="javascript">
window.onload=function(){
var canvas=document.getElementById("draw");
var mc=canvas.getContext("2d");
var x=-350,y=50;
var rotate=0;
var anim=setInterval(startanim,190);
function startanim()
{
mc.clearRect(0,0,mc.canvas.width,mc.canvas.height);
mc.fillStyle="red";
mc.font="25px Arial Black";
mc.fillText("welcome to learn html 5 tutorial site",x,y);
//mc.restore();
if(x<=mc.canvas.width)
x+=10;
if(x>mc.canvas.height)
{
x=-350;
}
};
}
</script>
<canvas width="600px" height="500px" id="draw">
Your Browser Does not support HTML 5 Canvas Tag.
</canvas>
window.onload=function(){
var canvas=document.getElementById("draw");
var mc=canvas.getContext("2d");
var x=-350,y=50;
var rotate=0;
var anim=setInterval(startanim,190);
function startanim()
{
mc.clearRect(0,0,mc.canvas.width,mc.canvas.height);
mc.fillStyle="red";
mc.font="25px Arial Black";
mc.fillText("welcome to learn html 5 tutorial site",x,y);
//mc.restore();
if(x<=mc.canvas.width)
x+=10;
if(x>mc.canvas.height)
{
x=-350;
}
};
}
</script>
<canvas width="600px" height="500px" id="draw">
Your Browser Does not support HTML 5 Canvas Tag.
</canvas>
Description:
first of all we set X and Y cordinates and we give it negative values because before animation we do not want to show our content.Then within setInterval function we give a function name and duration.That means every 190 milisecond later this function execute.All of our animation condition lyes on that startanim function.startanim function
we clear our canvas each stage of animation.If not it will draw text every where on its own path.
Then Draw some Text which will be animate.We give two variables in its positions.So every 190 millisecond later values of these variable's value will change so text will animate. Then we give a if condition and tell the browser if the X cordinates of the text if less then the total weidth of canvas then add 10 each time when the staranim function run.So every 190 millisecond later it will add 10 to the x variable that cause the move of the text.
Now when X cordinate is equal to total canvas weight then it will stop adding 10 .So that time we tell that when x cordinate is equal to total canvas weight then set the x cordinate value -350 means the starting point.
Code hints:
Remember here we animate text but you can animate any shape or image just changing its X or Y by using above method.Tuesday, January 15, 2013
scale
scale:
By using scale method we can increase or decrease any shapes height and width without changing height and width.See the graph and then read the Demonstration carefully.After that you have a complete idea what it is and why you should use it.Hints:
In the code section you find the two for loop which is for make lines purpose and have to relation with the scale.
ss<canvas id="scale" width="600px" height="400px" style="border:2px solid red">sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("scale");
var sec=sex.getContext("2d");
//This loop is for X values;
var x;
for(x=0;x<16;x++)
{
sec.lineWidth=1;
sec.strokeStyle="orange";
sec.beginPath();
sec.moveTo(x*50,0);
sec.lineTo(x*50,sec.canvas.height);
sec.stroke();
sec.fillText(x*50+" X",x*50,10);
sec.fill();
}
//This loop here represent Y values
var y;
for(y=0;y<15;y++)
{
sec.lineWidth=1;
sec.strokeStyle="green";
sec.beginPath();
sec.moveTo(0,y*50);
sec.lineTo(sec.canvas.width,y*50);
sec.stroke();
sec.fillText(y*50+" Y",2,y*50);
//sec.fill();
}
//scale tutorial start from here
sec.fillStyle="purple";
sec.fillRect(50,50,150,100);
sec.save();
sec.scale(1,0.5);
sec.fillStyle="green";
sec.fillRect(250,250,150,100);
sec.scale(1,1);
sec.fillStyle="red";
sec.fillRect(50,350,150,100);
sec.restore();
sec.fillRect(350,250,150,100);
</script>
Demonstration:
First Rectangular filled up by Purple its width is 150px and height is 100px.Start from 50,50 away from origin.Then we called scale method and give it 1,0.5.Which means remains width same 1 means full and height reduce by half o.5 means half.Although green rectangualr have same width and height compare to the first but green rectangular height is affected by scale method.In this scale method it told that do the height half which should have been counted.
Remember 1,1 means full height and width and below than is reduction from oiginal size and above them is higer than original size.
Third Rect,
Before third rectangular scale value is 1,1 and width and height are same as the first purple one,but height and width are appearing same as the second green one.Because third one assume that its original(alwasy count from its immediate previous one) is second one so 1,1 means same as second one.
Fourth Rect,
Fourth one is same as the first one,but height and width are same as the second and third one.Because we save the first one's current scale by save() method for future use.Then before fourth rectangular we restore all of our settings by using restore method.
Canvas translate and rotate
Translate:
By using Translate () method can move Entire canvas from original point to another point.Original X=0 and Y=0 point is the top left corner of the campus,from here we calculate our X and Y value.Now we already draw a custom shape which have several X and Y value,But we want to move our entire custom shape from one place to other without changing the all of X and Y value.We can do by using translate methods.
Translate method takes two parameter X and Y value.This two value is the next origin point of canvas,
See the Graph.
<canvas id="tran" width="400px" height="300px">
sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("tran");
var sec=sex.getContext("2d");
//old origin point.
sec.strokeStyle="green";
sec.fillStyle="gray";
sec.lineWidth=5;
sec.beginPath();
sec.moveTo(0,0);
sec.lineTo(0,sec.canvas.height);
sec.moveTo(0,0);
sec.lineTo(sec.canvas.width,0);
sec.stroke();
sec.fillRect(10,10,150,125);
sec.strokeStyle="red";
sec.beginPath();
sec.moveTo(200,125);
sec.fillText("X=0,Y=0",200,120);
sec.lineTo(200,sec.canvas.height);
sec.stroke();
sec.moveTo(200,125);
sec.lineTo(sec.canvas.width,125);
sec.stroke();
sec.translate(200,125);
sec.fillRect(10,10,150,125);
</script>
sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("tran");
var sec=sex.getContext("2d");
//old origin point.
sec.strokeStyle="green";
sec.fillStyle="gray";
sec.lineWidth=5;
sec.beginPath();
sec.moveTo(0,0);
sec.lineTo(0,sec.canvas.height);
sec.moveTo(0,0);
sec.lineTo(sec.canvas.width,0);
sec.stroke();
sec.fillRect(10,10,150,125);
sec.strokeStyle="red";
sec.beginPath();
sec.moveTo(200,125);
sec.fillText("X=0,Y=0",200,120);
sec.lineTo(200,sec.canvas.height);
sec.stroke();
sec.moveTo(200,125);
sec.lineTo(sec.canvas.width,125);
sec.stroke();
sec.translate(200,125);
sec.fillRect(10,10,150,125);
</script>
Description:
Firstly we draw a rectangular both 10px far from both X and Y.Then we called translate () method and set new origin position(origin position is a position from where X and Y is counted ) .Soon after we again draw same rectangular with same distance from origin point but this time rectangular counts from its new origin defined by translate function.Rotate:
We can rotate anything by using rotate () method.It takes one parameter which is angels.Remember,In canvas angels are radians.A full radians is 180 degree.If you want to rotate in angle then you have to divide the radians with angels.Suppose you want 45 degree of angels so you can divide radians /4 the result would be 45.
Structure:rotate(Math.PI / 4);
Here Math.PI is represents radians and its full means equal to 180 degree.
Another convenient way you can convert radians into angels are
var angel=(Math.PI /180)* your desire angel like 25;
Here you first part Math.PI/180 will gives you 1 degree equivalent radians and then you multiply with your given degree here 25 so now you get 25 degree and store it in a variable called angel.everytime you use rotation just give your desire degree and it will done all work to convert radians to angel.
Lets code:
Rotatation Origin:
In the first circle rotate 45 degree from its origin point and its origin point is where x=0 and Y=0; which is top left corner.One Tricks to remember that if you rotate then rotatation will occer in canvas not shape.Shapes still maintain X and Y values .(Suppose you stand on a chair and if chair rotate some degree that will not change your X and Y position on chair but due to chairs rotations your position will change.)Please saw the second rectangular rotation and you may notice that that rectangular hold the same x and y but due to canvas rotation it looks different.
Code Hints.Before first gray rectangular rotation i save the current situation by calling save () method.Otherwise our all of the drawing will rotate.So we can restore our canvas any time in future and we did this before second green rectangular.The second rect origin point is changed by translate () method.So it start rotating based on current X and Y 0 position.
The Code.
sljfd
<canvas height="400px" id="rote" style="border: 2px solid #800;" width="600px">sorry your browser doesnot support canvas tag.</canvas>
<script type="text/javascript">var sex=document.getElementById("rote");var sec=sex.getContext("2d");
//old origin point. sec.strokeStyle="green"; sec.fillStyle="gray"; sec.lineWidth=5;sec.save(); sec.rotate(Math.PI / 4); sec.fillRect(10,10,150,125); sec.strokeStyle="red";sec.restore(); sec.beginPath(); sec.moveTo(200,125); sec.fillText("X=0,Y=0",200,120); sec.lineTo(200,sec.canvas.height); sec.stroke(); sec.moveTo(200,125); sec.lineTo(sec.canvas.width,125); sec.stroke();sec.restore();var angel=(Math.PI /180)*45;
sec.translate(200,125);sec.rotate(angel); sec.fillStyle="green" sec.fillRect(10,10,150,125);
</script>Rotate Complete Project
<!DOCTYPE html>
<html>
<head>
<title>The Rotate Transform</title>
<style type="text/css">
canvas {
border: dotted 1px black;
margin: 25px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
ctx.fillStyle="green";
ctx.strokeStyle="red";
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
var radian=(Math.PI / 180) * 20;
for (var degrees = 0; degrees < 360; degrees += 20) {
ctx.rotate(radian);
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.stroke();
}//End of for loop
}
}
}
</script>
</head>
<body>
<h1>The Rotate Transform</h1>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
Clipping Path
Clipping Path
By using drawing image method you insert a image in canvas but you do not want to show all parts of the image.By clipping Path you can display certain part of image which is already drawn on the canvas.This is the burz al khalifa hotel in dubai.Firstly we draw this image on our canvas and then we just want to show the building roof and rest of the image will overlap.
Let's go how to do this.
<canvas height="300px" id="cp" width="400px">
sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("cp");
var sec=sex.getContext("2d");
var img=document.getElementById("clip");
sec.beginPath();
sec.moveTo(10,0);
sec.lineTo(120,50);
sec.lineTo(150,80);
sec.lineTo(170,130);
sec.lineTo(150,150);
sec.lineTo(50,100);
sec.clip();
sec.drawImage(img,10,10);
</script>
Here i give the above image id is clip and got this image and save it to a variable.Then Create a custom shape by using old tools moveTo and lineTo methods.When we draw our boundary then tell the browser now cut rest of the image part by calling clip() method.Play with the line to and move To values and you can find a lot of interesting thing on it.sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("cp");
var sec=sex.getContext("2d");
var img=document.getElementById("clip");
sec.beginPath();
sec.moveTo(10,0);
sec.lineTo(120,50);
sec.lineTo(150,80);
sec.lineTo(170,130);
sec.lineTo(150,150);
sec.lineTo(50,100);
sec.clip();
sec.drawImage(img,10,10);
</script>
draw_image
Draw Image
Sometimes we may need some images to style our custom shapes more cool and stylish.So by using canvas drawImage method we can insert a image in our canvas.
Structure:
drawImage(image Source,X ,Y);
Remember if you give 10,10 on X and Y then image top left corner. will start from 10 pixel left and 10px down to the top left corner of canvas.
Additionally you can specify the width and height of image after the position X,Y.
drawImage(imagesource,X,Y,width,height).
Remember Image height and weight parameter is optional.
Additionally you can specify the width and height of image after the position X,Y.
drawImage(imagesource,X,Y,width,height).
Remember Image height and weight parameter is optional.
There are two way you can draw image on canvas.One is to create a image object and then pass this object to drawImage method.Another way is to save the image location on a variable and then just use the variable on source place.
F<canvas height="300px" id="cir" width="400px">
sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("cir");
var sec=sex.getContext("2d");
var img=document.getElementById("island");
sec.drawImage(img,10,10);
</script>
sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("cir");
var sec=sex.getContext("2d");
var img=document.getElementById("island");
sec.drawImage(img,10,10);
</script>
Here we firstly insert a image above the canvas and give it a id for future usuage.Then we just use this id and draw our image in canvas.Remember if you use the image below the canvas then you have to use window.onload function to wait until image loading complete in DOM.
Subscribe to:
Posts (Atom)
