HTML5(五) Picture and Text

HTML5(五) Picture and Text

1. image object
Image is for a picture, we have many ways to get a image object.
a. document.images array
b. document.getElementsByTagName or document.getElementById 
c. create a new Image object, and set a picture URL
   var img = new Image();
   img.src = 'my_image.png';
d. data:url
encode all the picture data via BASE64 to /9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw
and put them all in the html

2. drawing object
drawImage(image,x,y)
(x,y) is the left top point of the picture, it decides the postion

my example of the small picture, test5.html:
<canvas id="canvas1" width="250" height="300" style="background-color:black">
    you are out!
</canvas><br/>
<input type="button" value="show the girl" onclick="Show();" />
<input type="button" value="hide" onclick="Clear();" />

<script type="text/javascript">
    //picture data Base64 encode
    IMG_SRC='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......'//省略40字节
    //small
    IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXwAAABMCAwABAAAAAQAAAGmHBAABAAAAcwAAAAAAAABBQ0QgU3lzdGVtcyDK/cLrs8nP8QAyMDEwOjEwOjA0IDE1OjM5OjU3AAUAAJAHAAQAAAAwMjIwkJICAAQAAAAyODEAAqAEAAEAAAAXAAAAA6AEAAEAAAAeAAAABaAEAAEAAAC1AAAAAAAAAAIAAQACAAQAAABSOTgAAgAHAAQAAAAwMTAwAAAAAAAAAAD//gAqSW50ZWwoUikgSlBFRyBMaWJyYXJ5LCB2ZXJzaW9uIDEsNSw0LDM2AP/AABEIAB4AFwMBIQACEQEDEQH/2wCEAAMCAgICAQMCAgIDAwMDBAcEBAQEBAkGBgUHCgkLCwoJCgoMDREODAwQDAoKDxQPEBESExMTCw4VFhUSFhESExIBBAUFBgUGDQcHDRsSDxIbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbG//EAIgAAAIDAQAAAAAAAAAAAAAAAAUGBwgJBBAAAQMDAgQBCgcBAAAAAAAAAQIDBAUGEQcSAAghMRMJFRYiQVRhcZGUFBcyUVWB0eEBAQEBAQAAAAAAAAAAAAAAAAYHBQQRAAEEAQAHCAMAAAAAAAAAAAEAAgMRBBITMVFhcYEFISIkMjNB8LHR4f/aAAwDAQACEQMRAD8AtfYlwW1qbYUkTNE4k2lUxDbVClQ58eYanDypKnkltYLbfjoeSUEk5T6w6jgNp7YGoz/MnXo1w2LaVJsJhC0UZMWoOGoNOJWnHiIUpQUhaSpQIxjABA7cc2LK+OYn6Vo5Fy4mqkcaGwbj+vhSTWNPLaZjeNNfpqADtxIl4P8AScDpwH9CrI97oX3H/eErc6au4noEUdhQ34gL4lVCrKh5N/nfmNWRIq9wW1eVCefg0qZODrkaW2vOCdoCkFRO4pCVbVZG5ScKbbEvOu8y/KzqDOra49Oq9Iq8avR/Msh4luGWdjrKXF+uQnIWc9Tk+zGJ7nSPjx3vb6qNc6P5pL5vZNbv6otqlFp8CMtlL0ybtIy2uSp109sqGTn58CPwkH+Eqf0X/vAeHtrOcyy4dUd1pGwJz5/zXa3ymWvcEugh5yLV5C5sx57wHQXUJUhtsfrUnc25lI6AAE9s8C/J8sah2TpTfGqFQsBNctmt0dwiSZhaciNoCwtsJ2HcHAUnuQPDPbPFBvyhdVn6UmkBLzupJV3XpT4lPkLDzfjIebjMpaG9SlbN6s46429vkeE/8wnv2e+3XxP8bBLo7KLFhtaQ6rW9pPq/XKZbWoVjIrMGjvprqmHlbW3HglSMkJPrdCcg4Cvb8TerWpkKwOUG4G7NoEeKmLT10+JF8JLccLWnYjKU9AhO7sAc9uKA0yNiJJSeRzaHAXzWW9VtqsrqjTPnCOXlxkokK2kJXs6dMDoSrrn4444/Q2r+/RvqvjKbjaLQEf0Sv//Z';


    function Show(){
        ctx = document.getElementById("canvas1").getContext("2d");
        img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0);
        }
        img.src=IMG_SRC_SMALL;  
    }

    function Clear(){
        ctx = document.getElementById("canvas1").getContext("2d");
        ctx.clearRect(0,0,250,300);
    } 
</script>

3. enlarge and make it small
drawImage(image,x,y,width,height)

my test page is test5-1.html:
<canvas id="canvas2" width="250" height="300" style="background-color:black">
    you are out
</canvas><br/>
horizontal<input type="range" min="1" max="200" onchange="Scale1(event)"/><br/>
vertical<input type="range" min="1" max="200" onchange="Scale2(event)"/><br/>
percent<input type="range" min="1" max="200" onchange="Scale3(event)"/><br/>
tile<input type="range" min="1" max="100" value="1" onchange="Scale4(event)"/><br/>

<script type="text/javascript">   

    function Scale1(){
        //caculate
        var scale=event.target.value/10
        ctx = document.getElementById("canvas2").getContext("2d");
        ctx.clearRect(0,0,250,300);
        img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0,img.width*scale,img.height);
        }
        img.src=IMG_SRC_SMALL;
    }
       
    function Scale2(){
        var scale=event.target.value/10
        ctx = document.getElementById("canvas2").getContext("2d");
        ctx.clearRect(0,0,250,300);
        img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0,img.width,img.height*scale);
        }
        img.src=IMG_SRC_SMALL;
    }
   
    function Scale3(){
        var scale=event.target.value/10
        ctx = document.getElementById("canvas2").getContext("2d");
        ctx.clearRect(0,0,250,300);
        img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0,img.width*scale,img.height*scale);
        }
        img.src=IMG_SRC_SMALL;
    }
   
    function Scale4(){
        var scale=event.target.value;
        ctx = document.getElementById("canvas2").getContext("2d");
        ctx.clearRect(0,0,250,300);
        img=new Image();
        img.onload=function(){
            var n1=img.width/scale;
            var n2=img.height/scale;
           
            for(var i=0;i<n1;i++)
                for(var j=0;j<n2;j++)
                    ctx.drawImage(img,i*img.width/scale,j*img.height/scale,img.width/scale,img.height/scale);
        }
        img.src=IMG_SRC_SMALL;
    }
</script>

4. cut the image
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
(sx,sy) the start point of the cut picture
sWidth and sHeight are the width and height of the cut picture.

(dx,dy) the start point of the output picture
dWidth and dHeight are the width and height of the output picture.

5. Image
createPattern(image,type)
type: repeat, repeat-x, repeat-y, no-repeat
my example file is test5-2.html:
<canvas id="canvas3" width="250" height="300" style="background-color:black">
    you are out!
</canvas><br/>
<input type="button" value="Go" onclick="Patterns();" />
<input type="button" value="Clear" onclick="ClearPatterns();" />

<script type="text/javascript">
        function Patterns(){
        ctx = document.getElementById("canvas3").getContext("2d");
        img=new Image();
        img.src=IMG_SRC_SMALL;
        img.onload=function(){
            var ptrn = ctx.createPattern(img,'repeat');
            ctx.fillStyle = ptrn; 
            ctx.fillRect(0,0,250,300); 
        }
    }
   
    function ClearPatterns(){
        ctx = document.getElementById("canvas3").getContext("2d");
        ctx.clearRect(0,0,250,300);
    }
</script>

6.Text
font: text style, it is like font-family in CSS
textAlign:   start, end, left, right, center, default value is start.
textBaseline:  top, hanging, middle, alphabetic, ideographic, bottom. default value is alphabetic.

fillText
strokeText

my example file is test5-3.html:
<canvas id="canvas3" width="250" height="300" style="background-color:black">
    you are out!
</canvas><br/>
<input type="button" value="Show" onclick="Show();" />
<input type="button" value="Clear" onclick="ClearPatterns();" />

<script type="text/javascript">
   
    function Show(){
        ctx = document.getElementById("canvas3").getContext("2d");
        ctx.fillStyle    = 'white';
ctx.font         = 'italic 30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello world1!', 0, 0);
ctx.font         = 'italic 30px sans-serif';
ctx.fillText('Hello world2!', 0, 50);
    }
   
    function ClearPatterns(){
        ctx = document.getElementById("canvas3").getContext("2d");
        ctx.clearRect(0,0,250,300);
    }
</script>

references:
http://www.blogjava.net/myqiao/category/46360.html