html5 canvas元素使用(一)

html5新增了一個canvas元素，用於在網頁上生成一塊矩形區域，用於繪制圖像，功能非常強大，下面我來簡單介紹一下

 

在頁面中添加canvas

<canvas id="canvasDemo">您的瀏覽器暫不支持canvas</canvas>

 

如上圖所示，如果不給canvas設置寬高，默認寬是300px，高是150px。同時，canvas默認是透明的

我們可以給它設置寬高，邊框，甚至背景顏色。

注意，這邊設置的寬高是畫布的屬性，和style的是不一樣的

<canvas id="canvasDemo" width="600px" height="400px" style="border:3px solid white">您的瀏覽器暫不支持canvas</canvas>

 

 

canvas的使用

要想使用canvas,必須先渲染上下文，創建context對象，並獲取2D運行環境

1 var context = document.getElementById("canvasDemo"); //var context = document.getElementsByTagName("canvas");這樣是無效的
2 var ctx = context.getContext("2d");

 

 然后就可以開始畫圖了

畫圖之前我們要先了解下是畫圖是根據什么定位的，答案是坐標，而且這個這邊我們平時了解的是上下翻轉的，不過到和網頁css定位差不多

如果剛開始畫圖確定坐標不習慣的可以自己寫個方法轉換成正常的（x,canvasHeight-y）

 

canvas畫線

這邊畫線也沒什么好講的，網上都有

 

var context = document.getElementById("canvasDemo");
var ctx = context.getContext("2d");

ctx.moveTo(0,0);                //線條起點坐標
ctx.lineTo(20,20);               //線條終點坐標
ctx.lineWidth = 4;              //設置線條寬度
ctx.strokeStyle = "white";   //設置線條繪制顏色
ctx.stroke();

 

這邊要注意的是設置線條屬性值一定要在stroke之前，好比你自己拿筆畫畫，你肯定是先挑選畫筆吧，總不能畫完了（stroke）之后在挑筆吧...

這邊線條還有一個屬性比較有意思就是lineCap，設置了線條的格式，有三個值：butt，round,square;看下面就知道效果了

一個是正常的，一個是兩端添加圓形線帽，一個是兩端添加方形線帽

 

還可以連續畫折現

2 ctx.moveTo(200,100); 3 ctx.lineTo(400,100); 4 ctx.lineTo(100,300); 5 ctx.lineWidth = 30; 6 ctx.lineCap = "butt"; 7 ctx.strokeStyle = "white"; 8 ctx.stroke();

 

這時候有個lineJoin屬性，可以控制線段連接處的線條風格，值有bevel，round，miter

當值為miter時，會多一個屬性miterLimit（定義最大斜接長度）多數為角度比較小的時候才會有這種情況

看miterLimit = 5時，斜接長度大於5，

只能按照bevel展示，這時候加大miterLimit的值就能恢復正常

 

這個連接的屬性還是有用的，有的時候畫復雜的圖形，連接的不好會很丑。

 

canvas畫矩形

矩形的繪畫還是比較簡單的

有三種畫法

1、一種是用線條構建，使用closePath()閉合折線圖形

    ctx.moveTo(200,100);
    ctx.lineTo(400,100);
    ctx.lineTo(400,200);
    ctx.lineTo(200,200);
    ctx.closePath();
    ctx.lineWidth = 10;
    ctx.lineCap = "butt";
    ctx.lineJoin = "miter";
    ctx.miterLimit =4;
    ctx.strokeStyle = "white";
    ctx.stroke();

 

先畫邊框再填充顏色

ctx.fillStyle = "lightBlue";
ctx.fill();

 

看到沒，這邊有意思的是線框被占了是不是。

 

2、第二種相當於分離進化版

    ctx.strokeStyle = "white";
    ctx.lineWidth = 4;
    ctx.strokeRect(200,100,200,100)  //strokeRect(x,y,width,height)
4     ctx.fillStyle="lightBlue";
5     ctx.fill();

  紅色代碼就沒用了

 

 

3、第三種直接填充畫矩形，再畫邊框，當然你也可以不畫

 

    ctx.fillStyle="lightBlue";
    ctx.fillRect(200,100,200,100);
    ctx.strokeStyle="white";
    ctx.strokeRect(200,100,200,100);  //strokeRect(x,y,width,height)

 

 

 

canvas畫圓

 先來一個表達式吧

ctx.arc(x ,y,r,sAngle,eAngle,counterclockwise);     注意是arc不是src....

x,y  分別圓心的坐標；r為半徑；sAngle為起始角；eAngle為結束角；counterclockwise規定逆時針還是順時針，默認true為順時針

 

ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.arc(300,200,50,0,1.5*Math.PI);
ctx.stroke();

 

 

可以填充顏色

ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.arc(300,200,50,0,1.5*Math.PI);
ctx.stroke();
ctx.fillStyle = "lightBlue";
ctx.fill();

 

 

來個例子，畫個中國太極

        ctx.beginPath();
        ctx.arc(300, 200, 150, 0.5 * Math.PI, 1.5 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(300, 200, 150, 1.5 * Math.PI, 0.5 * Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(300, 125, 75, 0.5 * Math.PI, 1.5 * Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(300, 275, 75, 1.5 * Math.PI, 0.5 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();

        ctx.beginPath();
        ctx.arc(300, 275, 20, 0, 2 * Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(300, 125, 20, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();