HTML5 Application cache & Canvas

HTML5 Application cache : இணையத்தளங்களை இணைய இணைப்பு இல்லாமலேயே பார்க்க அவற்றை application cache மூலம் offline storage-ல் சேமிக்கலாம். இவ்வாறு offline-ல் ஒரு பக்கத்தை சேமிக்க <html> tag-உடன் manifest எனும் attribute-ஐ சேர்க்க வேண்டும்.
Database, Storage, Data Storage, Cylinder, Metal, Stack
உதாரணம் 
<html manifest="mysample.appcache">
//  ...
</html>
Manifest என்பது நாம் offline-ல் சேமிக்க விரும்பும் பக்கங்களை விளக்கும் ஒரு கோப்பு.
cache manifest – சேமிக்க விரும்பும் கோப்புகளின் பட்டியல்  
Network – இந்த பட்டியலில் உள்ள கோப்புகள் network இருந்தால் மட்டுமே அணுக முடியும். சேமிக்க இயலாது.
Fall back – பக்கங்களை அணுக முடியவில்லை என்றால் காட்ட வேண்டிய மாற்றுப் பக்கங்களின் பட்டியல்.
உதாரணம் 
CACHE MANIFEST
# 2013-03-19 v3.0.0

CACHE:
home.html
stylesheet.css
scripts/main.js

NETWORK:
login.apsx


FALLBACK:
default.html
images/offline.jpg

# – ல் தொடங்கும் வரிகள் comment.
எல்லா பக்கங்களையும் இணைய வழியில் மட்டுமே பார்க்க Network : * என்று எழுதுக. ஒருமுறை பக்கங்கள் சேமிக்கப்பட்டால் server-ல் அவை மாறினாலும் browser-ல் சேமிக்கப்பட்டவையே காட்டப்படும். புது மாற்றங்களைக் காட்ட manifest file-ஐ மாற்ற வேண்டும்.  .
Cache-ஐ மாற்றுதல்:
* பயனர் browser catche-ஐ நீக்கும் வரை
* manifest file-ஐ மாற்றும் வரை
* நிரல் வழியே catche மாறும் வரை
சேமிக்கப்பட்ட விவரங்கள் அப்படியே இருக்கும். இணைய இணைப்பு அதிகம் கிடைக்காத காலங்களில் இந்த offline storage முறை வெகுவாகப் பயன்படும்.

HTML5 Canvas:

இணையப் பக்கங்களில் 2D/3D படங்களை javascript கொண்டு வரைய <canvas> பயன்படுகிறது.
* இதில் resolution குறிப்பிடுவது அவசியம்.
* Text காட்டுவது கடினம்
* படங்களை jpg, png ஆகச் சேமிக்கலாம்.
* விளையாட்டுகளை உருவாக்கப் பெரிதும் பயன்படும் .
<canvas>-ல் id, width, height-ஐ கண்டிப்பாகத் தர வேண்டும்.
உதாரணம் 
<canvas id="sampleCanvas" width="100" height="100">
/*..*/
</canvas>
javascript கொண்டு இதை அணுகுதல்.
உதாரணம் 
var canvas  = document.getElementById("sampleCanvas");
படம் வரைதல்: getcontext(2d) என்ற function-ஆனது canvas-ஐ தயார் செய்கிறது. x,y coordinate தருவதன் மூலம் எளிதில் வரையலாம்.
var canvas = document.getElementById("sampleCanvas");
var context=canvas.getContext("2d");

Fill Rect (x1,y1,x2,y2) – பெட்டி வரைய
var canvas = document.getElementById("sampleCanvas");
var context=canvas.getContext("2d");
context.fillRect(0,0,100,200);


Moveto(x,y) – line தொடக்கம்
Lineto (x,y) – line முடிவு
stroke() – line வரைய உதாரணம் 
<!DOCTYPE html>
<html>
    <body>
        <img id="logo" src="sample.jpg" alt="logo" width="220" height="277"/>
        <canvas id="sampleCanvas" width="100" height="100" >
        </canvas>
        <script>
           var c=document.getElementById("sampleCanvas");
           var context=c.getContext("2d");
           context.moveTo(0,0);
           context.lineTo(200,100);
           context.strokeStyle = '#ff00ff'
           context.lineWidth = 10;
           context.stroke();      
        </script>
    </body>
</html>


Leave a Reply

%d bloggers like this: