Add a Gardient
Gardient ဆိုတာကေတာ့ အေရာင္ တစ္ခုကေန ေနာက္ အေရာင္တစ္ခုကို သန္းျပီး ေျပာင္းသြားတဲ့ အေရာင္ပါ။ gardient ကို ပံုေတြ ဆြဲသည့္ အခါမွာ ထည့္သံုးၾကတာကို ေတြ႕မိမွာပါ။
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas</title>
<style>
canvas#myCanvas {border: 1px solid gray;}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var grd = ctx.createLinearGradient(0,0,0,400);
grd.addColorStop(0,"yellow");
grd.addColorStop(0.5,"orange");
grd.addColorStop(1,"red");
ctx.fillStyle = grd;
ctx.fillRect(0,0,600,400);
</script>
</body>
</html>gardient အတြက္ code က နည္းနည္းမ်ားပါတယ္။ ပထမဆံုး createLinearGradient နဲ႕ စမွတ္ နဲ႕ ဆံုးမွတ္ကို သတ္မွတ္ပါတယ္။ ကၽြန္ေတာ္တုိ႕ဟာ 600,400 ရိွတဲ့ စတုဂံကို ဆြဲမွာ ျဖစ္ျပီးေတာ့ အဲဒီ စတုဂံကို gardient အေရာင္ ျခယ္ပါမွာ။ garident ကို စမွတ္ 0,0 ကေန 0, 400 အထိ ဆြဲလိုက္ပါတယ္။ ဒါေၾကာင့္ အေရာင္ျခယ္တဲ့ အခါမွာ ေဒါင္လိုက္ gardient ျဖစ္ေနပါမယ္။
ျပီးတဲ့ အခါမွာေတာ့ အဝါေရာင္ကို စမွတ္ ထားလိုက္တယ္။ ျပီးေတာ့ လိေမၼာ္ေရာင္ကို တဝက္မွာ ထားျပီးေတာ့ အဆံုးမွာ အနီေရာင္ထားလုိက္ပါတယ္။ ျပီးတဲ့ စတုဂံဆြဲလိုက္ပါတယ္။ အဲဒီ အခါမွာေတာ့ ေအာက္ကလို ပံုရလာပါတယ္။
Figure 11-18
တကယ္လို႕ စက္ဝိုင္းပံုစံ လိုခ်င္ရင္ေတာ့ createRadialGardient ကို အသံုးျပဳရပါတယ္။
var grd = ctx.createRadialGradient(300,200,10,300,200,360);လုိ႕ ျပင္လိုက္ရင္ ေအာက္က ပံုျမင္ရပါမယ္။
Figure 11-19
စက္ဝိုင္းပံုစံ အတြက္ createRadialGardient parameter ကေတာ့
ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);| Parameter | Description |
|---|---|
| x0 | gardeint ဆြဲဖုိ႕ အတြက္ x point စမွတ္ |
| y0 | gardeint ဆြဲဖုိ႕ အတြက္ y point စမွတ္ |
| r0 | စက္ဝိုင္းရဲ႕ အခ်င္း |
| x1 | x-coordinate ဆံုးမွတ္ |
| y1 | y-coordinate ဆံုးမွတ္ |
| r1 | စက္ဝိုင္းရဲ႕ ဆံုးမွတ္ အျခင္း |