27 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>

 

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Feedback/Errata

Leave a Reply

Your email address will not be published.