ကၽြႏု္ပ္၏ ေက်ာင္း: Blog Wetget

Mac blu-ray Player for PC

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:49 AM with No comments

Mac blu-ray Player for PC

Download

အျပည့္အစုံဖတ္ရန္

Code သံုးၿပီး animation လုပ္ရေအာင္ 2

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 1:30 AM with No comments

ဒီတစ္ခါမွာေတာ့.. animation box ေလးေတြလုပ္ၾကရေအာင္...။ ပံုဆြဲစရာမလုိပါဘူး..။ code နဲ႔ပဲေရးသြားမွာပါ..။ ပထမဆံုးေအာက္က.. code ေတြကို.. copy ကူးလိုက္ပါ..။

<html>
<head>
<style>
body {margin:0px ; padding: 0px}
canvas{display:block}

</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
window.onload = function()
{
    // lets get the HTML canvas element so we draw on it
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d")
   
    var W = window.innerWidth,    // get the width of our window
            H = window.innerHeight;// get the height
           
            // set our canvas to our size of Width and height
            canvas.width = W;
            canvas.height = H;
           
            /*=========== Box class ===========*/
            function Box(_x,_y)
            {
                // the X/Y position
                this.x = _x;
                this.y = _y;
               
                // lets give it velocity X and Y
                this.xVel = 10 + Math.random()*20;
                this.yVel = 1;
               
                // the box width and height
                this.width = 20
                this.height = 20;
               
                // random colors for our box
                this.r = Math.round(Math.random()*255);
                this.g = Math.round(Math.random()*255);
                this.b = Math.round(Math.random()*255);
               
                this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";
               
                // lets make draw method for our box
                this.draw = function()
                {
                    ctx.strokeStyle = this.rgba;
                    ctx.strokeRect(this.x,this.y,this.width,this.height);
                   
                    this.update();
                }
               
                // function that handle our logics for our box
                this.update = function()
                {
                    // lets check if the ball get out of our screen and when
                    // it does that, make it bounce
                    // check the left window border
                    if(this.x < 0) {
                        this.x = 0;            // set its position to 0
                        this.xVel *= -1; // make it bounce
                    }
                   
                    // check the right border
                    if(this.x > W - this.width)
                    {
                            this.x = W - this.width;            // set its position to 0
                            this.xVel *= -1; // make it bounce
                    }
                   
                    // check the top border
                    if(this.y < 0) {
                        this.y = 0;            // this is what happen when u copy/paste
                        this.yVel *= -1; // make it bounce
                    }
                   
                    // the reason why we did this if function so the boxes dont
                    // try to add y by its velocity when its reach bottom
                    // cause it will cause it to spazz
                    // now we add gravity
                    if(this.y < H - this.height)
                        this.yVel += .25;
                   
                    // check the bottom border
                    if(this.y > H - this.height)
                    {
                            // when it bounce off the bottom decrease the ball speed
                            this.xVel *= .5
                            this.yVel *= .5
                           
                            this.y = H - this.height;            // set its position to 0
                            this.yVel *= -1; // make it bounce
                    }

// move add speed to our x/y
                    this.x += this.xVel;
                    this.y += this.yVel;
                }
            }
           
            // lets make array of boxes
            var boxes = [];
           
            // Function to draw stuff on our screen :)
            function draw()
            {
                // Background
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = "rgba(0,0,0,0.5)"
                ctx.fillRect(0,0,W,H);
               
                ctx.globalCompositeOperation = "lighter"
               
                // loop through the boxes and draw them
                for(i=0; i < boxes.length; i++)
                    boxes[i].draw();
               
                update();
            }
           
            // Function for our logic
            function update()
            {
                // loop through the boxes and draw them
                for(i=0; i < boxes.length; i++)
                    boxes[i].update();
            }
           
            // add box every minute we specify
            setInterval(function(){
                boxes.push( new Box(0,0))
            },1000);
           
            // set interval so we can draw then update our drawing
            // every 30 milisecond
            setInterval(draw,30);
}
</script>
</body>
</html>

notepad ထဲမွာ.. code ေတြကုိ.ထည့္လိုက္ပါမယ္..။ File > save ဆုိၿပီး.. box.html လို႔နာမည္ေပးၿပီး.. desktop မွာ သိမ္းလိုက္ပါ..။ desktop ေပၚက.. box.html ကုိ double click ႏွိပ္ၿပီးဖြင့္ၾကည့္လိုက္ပါ..။ box ေလးေတြ..က်လာတာကုိ..ေတြ႔ရပါလိမ့္မယ္...။ ဘာ ပံုမွမပါပါဘူး.. code နဲ႔ပဲေရးသြားတာပါ.. ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွ ကူးယူတင္ျပပါသည္။

အျပည့္အစုံဖတ္ရန္

Android အရုပ္ေလးကုိ Coding ေလးေတြနဲ႔လုပ္ရေအာင္

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 1:04 AM with No comments

ဒီတစ္ခါေတာ့.. Android အရုပ္ေလးကုိ..ဘာပုံမွမပါပဲနဲ႔.. HTML, CSS သံုးၿပီးေတာ့..ဆြဲၾကည့္ရေအာင္ေနာ္.။
ေပးထားတဲ့.. code ေတြကုိ.. copy ကူးလိုက္ပါ..။

<html>
<head>
<style>
div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
    height: 404px; width: 334px;
    margin: 100px auto;
  
}
.head{
    width: 220px; height: 100px;
    top: 32px;
  
    border-radius: 110px 110px 0 0;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
  
    -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
    background: #fff;
    width: 20px; height: 20px;
    position: absolute; top: 42px;
  
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
    width: 6px; height: 50px;
    position: absolute; top: -34px;
  
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.l_ant {
    left: 50px;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
.r_ant {
    right: 50px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.body{
    width: 220px; height: 184px;
    top: 40px;
  
    border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
    width: 50px; position: absolute;
    -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
    height: 150px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
    height: 80px; top: 182px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
    -webkit-transform: rotate(-5deg) translate(-4px, -8px);
    -transform: rotate(-5deg) translate(-4px, -8px);
    -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
    -webkit-transform: rotate(15deg) translate(-14px, 0);
    -transform: rotate(15deg) translate(-14px, 0);
    -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
    -webkit-transform: rotate(-30deg) translate(30px, 0);
    -transform: rotate(-30deg) translate(30px, 0);
    -moz-transform: rotate(-30deg) translate(30px, 0);
}

</style>
</head>
<body>
<div class="android">
    <div class="head">
        <div class="l_ant">
</div>
<div class="r_ant">
</div>
<div class="l_eye">
</div>
<div class="r_eye">
</div>
</div>
<div class="body">
        <div class="l_arm">
</div>
<div class="r_arm">
</div>
<div class="l_leg">
</div>
<div class="r_leg">
</div>
</div>
</div>
</body>
</html>

code ေတြကုိ.. notepad ထဲထည့္လိုက္ပါ.။ ၤFile ထဲက save ႏွိပ္ၿပီး.. android.html ဆိုၿပီး.. desktop မွာ save လုပ္လိုက္ပါ..။ ၿပီးရင္.. desktop ေပၚက.. android.html ကုိ double click ႏွိပ္ၿပီး.. ဖြင့္လုိက္ပါ..။ Android အရုပ္ေပးေပၚကုိ. mouse တင္ၾကည့္ပါ..။ အရုပ္ေလးက..လွဳပ္ေနပါလိမ့္မယ္... ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွ ကူးယူတင္ျပပါသည္။

အျပည့္အစုံဖတ္ရန္

Code သံုးၿပီး.animation လုပ္ရေအာင္

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 12:46 AM with 1 comment

ဒီတစ္ခါေတာ့..သစ္ပင္ေလးတစ္ပင္ကုိ html , javascript နဲ႔ css သံုးၿပီး.. animation တစ္ခုဖန္တီးၾကမယ္.. :) ေအာက္မွာၿပထားတဲ့ code ေတြကုိ.. copy ကူးလိုက္ပါ..။

<html>
<head>
<script>
window.onload = function(){
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 //Lets resize the canvas to occupy the full page
 var W = window.innerWidth;
 var H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 
 //Some variables
 var length, divergence, reduction, line_width, start_points = [];
 
 init();
 
 function init()
 {
  //filling the canvas white
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, W, H);
  
  //Lets draw the trunk of the tree
  //lets randomise the variables
  //length of the trunk - 100-150
  length = 100 + Math.round(Math.random()*50);
  //angle at which branches will diverge - 10-60
  divergence = 10 + Math.round(Math.random()*50);
  //Every branch will be 0.75times of the previous one - 0.5-0.75
  //with 2 decimal points
  reduction = Math.round(50 + Math.random()*20)/100;
  //width of the branch/trunk
  line_width = 10;
  
  //This is the end point of the trunk, from where branches will diverge
  var trunk = {x: W/2, y: length+50, angle: 90};
  //It becomes the start point for branches
  start_points = []; //empty the start points on every init();
  start_points.push(trunk);
  
  //Y coordinates go positive downwards, hence they are inverted by deducting it
  //from the canvas height = H
  ctx.beginPath();
  ctx.moveTo(trunk.x, H-50);
  ctx.lineTo(trunk.x, H-trunk.y);
  ctx.strokeStyle = "brown";
  ctx.lineWidth = line_width;
  ctx.stroke();
  
  branches();
 }
 
 //Lets draw the branches now
 function branches()
 {
  //reducing line_width and length
  length = length * reduction;
  line_width = line_width * reduction;
  ctx.lineWidth = line_width;
  
  var new_start_points = [];
  ctx.beginPath();
  for(var i = 0; i < start_points.length; i++)
  {
   var sp = start_points[i];
   //2 branches will come out of every start point. Hence there will be
   //2 end points. There is a difference in the divergence.
   var ep1 = get_endpoint(sp.x, sp.y, sp.angle+divergence, length);
   var ep2 = get_endpoint(sp.x, sp.y, sp.angle-divergence, length);
   
   //drawing the branches now
   ctx.moveTo(sp.x, H-sp.y);
   ctx.lineTo(ep1.x, H-ep1.y);
   ctx.moveTo(sp.x, H-sp.y);
   ctx.lineTo(ep2.x, H-ep2.y);
   
   //Time to make this function recursive to draw more branches
   ep1.angle = sp.angle+divergence;
   ep2.angle = sp.angle-divergence;
   
   new_start_points.push(ep1);
   new_start_points.push(ep2);
  }
  //Lets add some more color
  if(length < 10) ctx.strokeStyle = "green";
  else ctx.strokeStyle = "brown";
  ctx.stroke();
  start_points = new_start_points;
  //recursive call - only if length is more than 2.
  //Else it will fall in an long loop
  if(length > 2) setTimeout(branches, 50);
  else setTimeout(init, 500);
 }
 
 function get_endpoint(x, y, a, length)
 {
  //This function will calculate the end points based on simple vectors
  //http://physics.about.com/od/mathematics/a/VectorMath.htm
  //You can read about basic vectors from this link
  var epx = x + length * Math.cos(a*Math.PI/180);
  var epy = y + length * Math.sin(a*Math.PI/180);
  return {x: epx, y: epy};
 }
 
 
 
}
</script>
<style>
/*Some basic CSS*/
* {margin: 0; padding: 0;}
/*To remove the scrollers*/
#canvas {display: block;}
</style>
</head>
<body>

<canvas id="canvas"></canvas>
</body>
</html>

ၿပီးရင္.. notepad မွာထည့္လိုက္ပါ..။ tree.html ဆုိၿပီး.. desktop မွာ.. save လုပ္လိုက္ပါ့မယ္..။ desktop မွာ..အခုသိမ္းလိုက္တဲ့.. tree.html ဖိုင္ေလးကုိ.. double click ႏွိပ္ၿပီး ဖြင့္လိုက္ပါ..။ ဘာပံုမွမပါဘဲ..animation tree ေလးကုိ..ေတြ႔ရပါလိမ့္မယ္.. ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွကူးယူတင္ျပပါသည္။

အျပည့္အစုံဖတ္ရန္

မိမိဘေလာ့မွာ အလွဆင္ၾကရေအာင္လား

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 11:55 PM with No comments

ဘေလာ့ကာတိုင္း မိမိတို႔ျပဳလုပ္ထားတဲ့.. ဘေလာ့ေလးက ဆြဲေဆာင္မႈရွိေနတာကို သေဘာက်မွာပါ။ ကၽြန္ေတာ္ဆို တစ္ပါတ္တစ္ခါေလာက္ေျပာင္းေနတာ.... သူမ်ားဆိုဒ္ေတြက လွတာေလးေတြေတြ႕ရင္မ ေတာ့တာပဲ..... အခုလည္းေတြ႕လာလို႔ ျပန္ရွယ္ေပးလိုက္တယ္....။။...။။...။။...။။....။။.....။။ သည္မွာ နမူနာ ေအာက္ပါပံုအား နမူနာၾကည့္ရန္သြားၾကည့္ႏိုင္ပါတယ္။

အျပည့္အစုံဖတ္ရန္

စာလုံး အၾကီး+အေသး ကလစ္ဖတ္ႏုိင္ရန္

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 7:31 PM with No comments

ဒါေလးကေတာ့ မိမိဘေလာ့ရဲ႕ စာလုံးေတြကို ၾကီးလိုပါက ၾကီးနိဳင္တယ္.... ေသးလိုပါကလည္း ေသးနိဳင္ပါတယ္ ဆိုတဲ့ ကုဒ္ဒင္းေလးတစ္ခုပါ...ထည့္ရတာလဲ အရမ္းလြယ္ကူပါတယ္...ေနာ္.... ထည့္နည္းနဲ႕ ကုဒ္ေတြကို ေအာက္မွာ ယူလိုက္ပါ... ထည့္နည္း.......

   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

Ref; ဘေလာ့ ခရီးသည္

အျပည့္အစုံဖတ္ရန္

Simple calendar clock

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:58 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

from blogger Design

အျပည့္အစုံဖတ္ရန္

CITIZEN Calendar

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:55 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

from Blogger Design

အျပည့္အစုံဖတ္ရန္

Shengruxiahua Calendar

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:53 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Romantic Day

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:51 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Clock wave transformation

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:42 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Changing numbers

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:40 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Splendour

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:30 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။

Add a Gadget

HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍

Save

code

အျပည့္အစုံဖတ္ရန္

Green Forest

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:22 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Fashion Calendar

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 6:03 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Ruma small bell

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 4:29 AM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save

code

အျပည့္အစုံဖတ္ရန္

Blossoming of Maximo Oliveros (Purple)

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 9:12 PM with No comments

ပထမဦးဆံုး Layout ထဲကိုဝင္ပါ။
Add a Gadget
HTML/JavaScript တြင္ ေအာက္မွေပးထားေသာကုဒ္ကိုထည့္၍
Save
code

code
<center> <a href="http://myschoolmmo.blogspot.com/" target="_blank"><embed src="http://www.blogclock.cn/swf/S100028c14b8825-2.swf" Width="150px" Height="242px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed></a></center>

အျပည့္အစုံဖတ္ရန္

Mac blu-ray Player for PC

Code သံုးၿပီး animation လုပ္ရေအာင္ 2

Android အရုပ္ေလးကုိ Coding ေလးေတြနဲ႔လုပ္ရေအာင္

Code သံုးၿပီး.animation လုပ္ရေအာင္

မိမိဘေလာ့မွာ အလွဆင္ၾကရေအာင္လား

စာလုံး အၾကီး+အေသး ကလစ္ဖတ္ႏုိင္ရန္

Simple calendar clock

CITIZEN Calendar

Shengruxiahua Calendar

Romantic Day

Clock wave transformation

Changing numbers

Splendour

Green Forest

Fashion Calendar

Ruma small bell

Blossoming of Maximo Oliveros (Purple)

Post ဖတ္ႏိုင္ရန္အတြက္သင့္emailထားခဲ့ပါ။

Popular Posts

Random Post

ေနာက္ဆံုးတင္ထားသမွ်

Comment

Total Pageviews

လည္ပတ္သင့္ေသာ ေနရာမ်ား