html5-Canvas可以在web中繪制各種圖形

字號:


    在html5中我覺得最重要的就是引入了Canvas,使得我們可以在web中繪制各種圖形。給人感覺單在這點上有點模糊我們web和桌面程序的感覺。在html5外web中也有基于xml的繪圖如:VML、SVG。而Canvas為基于像素的繪圖。Canvas是一個相當于畫板的html節(jié)點,我們必須以js操作繪圖。
    如下:
    <canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas>定義。
    我們可以獲取canvas對象為var c=document.getElementById("myCanvas");其應(yīng)有js屬性方法如下列舉:
    1:繪制渲染對象,c.getContext("2d"),獲取2d繪圖對象,無論我們調(diào)用多少次獲取的對象都將是相同的對象。
    2:繪制方法:
    clecrRect(left,top,width,height)清除制定矩形區(qū)域,
    fillRect(left,top,width,height)繪制矩形,并以fillStyle填充。
    fillText(text,x,y)繪制文字;
    strokeRect(left,top,width,height)繪制矩形,以strokeStyle繪制邊界。
    beginPath():開啟路徑的繪制,重置path為初始狀態(tài);
    closePath():繪制路徑path結(jié)束,它會繪制一個閉合的區(qū)間,添加一條起始位置到當前坐標的閉合曲線;
    moveTo(x,y):設(shè)置繪圖其實坐標。
    lineTo(x,y);繪制從當前其實位置到x,y直線。
    fill(),stroke(),clip():在完成繪制的最后的填充和邊界輪廓,剪輯區(qū)域。
    arc():繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小;
    rect():矩形路徑;
    drawImage(Imag img):繪制圖片;
    quadraticCurveTo():二次樣條曲線路徑,參數(shù)兩個控制點;
    bezierCurveTo():貝塞爾曲線,參數(shù)三個控制點;
    createImageData,getImageData,putImageData:為Canvas中像素數(shù)據(jù)。ImageData為記錄width、height、和數(shù)據(jù) data,其中data為我們色素的記錄為
    argb,所以數(shù)組大小長度為width*height*4,順序分別為rgba。getImageData為獲取矩形區(qū)域像素,而putImageData則為設(shè)置矩形區(qū)域像素;
    … and so on!
    3:坐標變換:
    translate(x,y):平移變換,原點移動到坐標(x,y);
    rotate(a):旋轉(zhuǎn)變換,旋轉(zhuǎn)a度角;
    scale(x,y):伸縮變換;
    save(),restore():提供和一個堆棧,保存和恢復繪圖狀態(tài),save將當前繪圖狀態(tài)壓入堆棧,restore出棧,恢復繪圖狀態(tài);
    … and so on!
    好了,也晚了。附我的測試代碼,:
    代碼如下:
    <html>
    <head>
    </head>
    <body>
    <canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas>
    <script type="text/javascript">
    var width,height,top,left;
    width=height=100;
    top=left=5;
    var x=10;
    var y=10;
    var c=document.getElementById("myCanvas");
    var maxwidth=c.width-5;
    var maxheight=c.height-5;
    var cxt=c.getContext("2d");
    cxt.strokeStyle="#00f";
    cxt.strokeRect(0,0,c.width,c.height);
    var img=new Image();
    img.src="1.gif";
    var MyInterval=null;
    start();
    function Refresh(){
    cxt.clearRect(left,top,width,height);
    if((left+x)>(maxwidth-width)||left+x<0){
    x=-x;
    }
    if((top+y)>(maxheight-height)||top+y<0){
    y=-y;
    }
    left=left+x;
    top=top+y;
    cxt.drawImage(img,left,top,width,height);
    cxt.font="20pt 宋體";
    cxt.fillText("破狼",left,top+25);
    }
    function start(){
    if(MyInterval==null){
    MyInterval=setInterval("Refresh()",100);
    }
    }
    function stop(){
    if(MyInterval!=null){
    clearInterval(MyInterval);
    MyInterval=null;
    }
    }
    function InRectangle(x,y,rectx,recty,rwidth,rheight){
    return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight)
    }
    c.onmouseover=function(e){
    if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
    stop();
    }
    c.onmouseout=function(e){
    start();
    }
    c.onmousemove=function(e){
    if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
    if(MyInterval!=null){
    stop();
    }
    }else{
    start();
    }
    }
    }
    </script>
    </body>
    </html>