Design

Canvas

အားလံုးပဲမဂၤလာပါ

ကြၽန္ေတာ္ကေတာ့ ေမာင္ေအာင္ခန္႔ၿဖိဳး ျဖစ္ပါတယ္။
Spiceworks Myanmar Company မွာ Web Developer အျဖစ္ လုပ္ကိုင္ေနပါတယ္။
ယေန႕ HTML5 တြင္ပါဝင္ေသာ Canvas နဲ႕ပတ္သတ္တဲ့ history, useful, example မ်ားကုိေဖာ္ျပေပးသြားမွာျဖစ္ပါတယ္။


What is Canvas Element?

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.


History

Canvas ကုိ ၂၀၀၄ ခုႏွစ္မွာ Apple Co.ltd ကေန သူတုိ႕ရဲ႕ ကုိယ္ပုိင္ Mac OS WebKit browser engine မွာစတင္မိတ္ဆက္ခဲ့တယ္။
သူတုိ႕ရဲ႕ powering application ျဖစ္တဲ့ Dashboard တုိ႕ Safari Browser တုိ႕မွာလည္း မိတ္ဆက္ခဲ့တယ္။

ေနာက္ပုိင္း ၂၀၀၅ ခုႏွစ္ေလာက္မွာ Mozilla ရဲ႕ develop လုပ္တဲ့ Gecko browser မွာ version 1.8 အျဖစ္ အတည္ျပဳခဲ့တယ္။
ေနာက္ ၂၀၀၆ ခုႏွစ္မွာေတာ့ Window,macOS, Linux OS မွာdevelop လုပ္တဲ့ Opera မွာလည္း အတည္ျပဳခဲ့တယ္။

Web Technologies ရဲ႕ next generation အတြက္ Web Hypertext Application Technology Working Group (WHATWG) ကေနဦးေဆာင္ျပီး စံသတ္မွတ္ခဲ့တယ္။

Web Hypertext Application Technology Working Group (WHATWG)

The Web Hypertext Application Technology Working Group (WHATWG) ဆုိတာက ၂၀၀၄ ခုႏွစ္ မွာ Apple, Mozilla, Opera အဖြဲ႕ အသီးသီးကေန စတင္တည္ေထာင္ခဲ့တဲဲ့ HTML နဲ႕ ဆက္စပ္ နည္းပညာ ေျပာင္းလဲမႈေတြကုိ စိတ္ဝင္စားၾကတဲ့ ပုဂၢိဳလ္ေတြ ပါဝင္ေသာ အဖြဲ႕အစည္းတစ္ခုျဖစ္ပါတယ္။


Useful

Html Code width height attributes နဲ႕ canvas ေနရာ သတ္မွတ္ႏုိင္သည္။
JavaScript Code နဲ႕ 2D APIs ေတြနည္းတူ drawing functions အစုအေဝးေတြနဲ႕ ဧရိယာ မ်ား access လုပ္ႏုိင္သည္။ အဲဒါေၾကာင့္ javascript codeနဲ႕ဘဲ အေျပာင္းအလဲလြယ္ကူစြာ graphics ေတြကုိ စိတ္ၾကိဳက္ပုံေဖာ္ႏုိင္သည္။
အျခားေသာ graphs, animations, games နဲ႕ ပုံမ်ား ေပါင္းစပ္ဖဲြ႕စည္းမႈ ေတြ ျပဳလုပ္နုိင္သည္။


Example Code

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Canvas element size versus drawing surface size

canvas ပုံေဖာ္ရန္အတြက္ size နွစ္ခုရွိပါတယ္။
1. သူ႕နဲ႕ သက္ဆုိင္ေသာ element ေနရာမွာ ပုံေဖာ္ရန္အတြက္ (Java Script)
2. canvas element ေနရာပုိင္ဆုိင္မႈအတြက္ width height ခ်ိန္ညွိျခင္း (HTML)

ဒါေၾကာင့္ (CSS) က နံပါတ္ 2 HTML ပုိင္ဆုိင္မႈဘဲ effect ထည့္လုိ႕ရပါတယ္။
default အေနနဲ႕ကေတာ့ element size က width 300နဲ႕ height 150

<!DOCTYPE html>
<html>
 <head>
 <title>Canvas element size: 600 x 300,
 Canvas drawing surface size: 300 x 150</title>
 <style>
 body {
 background: #dddddd;
 }
 #canvas {
 margin: 20px;
 padding: 20px;
 background: #ffffff;
 border: thin inset #aaaaaa;
 width: 600px;
 height: 300px;
 }
 </style>
 </head>
<body>
 <canvas id="canvas">
 Canvas not supported
 </canvas>
 </body>
</html>

Browser Supports

Canvas element is supported by the current versions of Mozilla Firefox, Google Chrome , Internet Explorer , Safari , Konqueror , Opera and Microsoft Edge.

“အားလုံးဘဲ သာယာေသာေန႕ရက္ေလးျဖစ္ပါေစ။

ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးအထူးတင္ပါတယ္ခင္ဗ်။“

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *