視頻地址：慕課·canvas小球倒計時
代碼下載請移步：github
演示地址：在線演示

一、canvas簡介

canvas是HTML5中新加入的標簽，但是其真正的控制卻大多需要javascript來控制。在標簽內可以寫一些不支持HTML5的瀏覽器的提示文字，不用擔心如果瀏覽器支持HTML5則標簽內的文本不會顯示。
示例：

<canvas id="canvas" >
      您的瀏覽器不支持html5請使用現代瀏覽器。
</canvas>

提示：由于需要在javascript中獲取該元素，所以需要給canvas設置id屬性

二、canvas基礎

在頁面中聲明canvas標簽后就可以在javascript中獲取并操作canvas畫布啦。

<script type="text/javascript">
//頁面默認調用函數      
window.onload=function(){
         //獲取canvas標簽元素
         var canvas=document.getElementById('canvas');

         //設置canvas寬、高
         canvas.width=500;
         canvas.height=500;    

        //獲取2d上下文
        var context=canvas.getContext('2d');
 }
</script>

以上代碼就是獲取和初步設置cnavas屬性的代碼。在設置canvas的寬高時不建議添加單位，因為可以把canvas看作一張畫布，設定寬、高時除了設定畫布大小之外也需要設置畫布的點密度，如果帶單位時只能設置畫布的大小，而如果不帶單位除了設置畫布大小外也同時設置了畫布的點密度。
在獲取到標簽元素后如果要在畫布中進行繪制還需要獲取文件的上下文，可以獲取2d、3d上下文，但是html5中推薦支持的是2d上下文，所以用2d上下文瀏覽器支持更好，而且大多數圖形使用2d上下文已經夠用。

三、canvas API簡介

有了一張畫布后我們就可以在畫布上進行繪制啦。

• 繪制路徑
  可以使用moveTo(x,y)方法設置路徑的起點，使用方法lineTo(x,y)設置繪制路徑的終點，使用stroke()方法渲染路徑。但是在我們連續繪制多條路徑時會發現繪制的多條路徑格式設置是相同的。因此為了避免繪制不同樣式路徑造成的不便可以在繪制路徑前用beginPath()函數和closePath()函數把路徑包裹起來，這樣在重新繪制時就可以使用新的樣式啦。

/*----------- draw line 1 --------------*/
        context.beginPath();

        context.moveTo(100,100);
        context.lineTo(700,700);
        context.lineTo(100,700);
        context.lineTo(100,100);
        context.lineTo(700,700);

        context.lineWidth=5;
        context.strokeStyle="red";
        context.stroke();
        //context.fill();

        context.closePath();

API:

|函數|性質|意義|
| :---: | : ---: | :---: |
|beginPath()| 方法| 開始一段路徑 |
|moveTo() | 方法 | 路徑起始點 |
|lineTo() | 方法 | 路徑終點 |
|lineWidth |屬性 | 路徑寬度 |
|strokeStyle|屬性 | 路徑顏色 |
|stroke() |方法 | 渲染路徑 |
|fill() |方法 | 填充封閉路徑 |
|closePath()|方法 | 結束一段路徑 |

• 繪制矩形
  繪制矩形也可以分為填充和繪制邊框兩種形式，使用fillRect(x,y,width,height)函數繪制實心矩形，使用strokeRect(x,y,width,height)函數繪制空心矩形。clearRect(x,y,width,height)函數來清除矩形區域。

/*--------- draw rect-------------------*/
        context.beginPath();

        context.fillStyle='yellow';
        context.fillRect(10,10,10,10);
        
        context.strokeStyle="black";
        context.strokeRect(30,30,30,30);


        context.closePath();

漸變的色條其實也是一個矩形塊，可以使用createLinearGradient(x1,y1,x2,y2)函數來設置漸變色帶的漸變方向，x1,y1代表起點,x2,y2代表終點。可以使用addColorStop(0,'顏色值'),addColorStop(1,'顏色值')來設置起點顏色和終點顏色。然后用設定的樣式填充一個矩形。

/*-------- draw linearGradient ---------*/
        var linear=context.createLinearGradient(0,0,50,300);

        linear.addColorStop(0,'red');
        linear.addColorStop(1,'green');

        context.fillStyle=linear;
        context.fillRect(10,10,200,200);

同樣的繪制陰影也可以看作是在圖形后面繪制一個其它矩形色塊，代碼如下。

/* ------ draw shandow -----------------*/
        context.beginPath();

        context.shadowOffsetX = 20; // 設置水平位移
        context.shadowOffsetY = -20; // 設置垂直位移
        context.shadowBlur = 6; // 設置模糊度
        context.shadowColor = "rgba(0,0,0,0.5)"; // 設置陰影顏色

        context.fillStyle = "#CC0000"; 
        context.fillRect(150,200,200,400);

        context.closePath();

• 繪制圓形、弧線
  弧線的繪制函數arc(x,y,r,startAngle, endAngle, anticlockwise)
  x,y表示圓心的坐標，r表示半徑，startAngle、endAngle代表開始弧度與結束弧度，anticloclwise表示弧線繪制是順時針(false)還是逆時針(true)。

/*----------- draw circly  -----------*/
        context.beginPath();

        context.lineWidth=5;
        context.strokeStyle="blue";

        context.arc(300,300,200,0,1.5*Math.PI,true);
        context.stroke();

        context.closePath();

如果要繪制原型將開始弧度、結束弧度分別設為0,2PI即可

* ----------- 實心圓 ---------------*/
        context.beginPath();

        context.fillStyle='red';
        context.arc(50,50,50,0,2*Math.PI,true);
        context.fill();

        context.closePath();
/*----------- 空心圓 ---------------*/
        context.beginPath();

        context.lineWidth=5;
        context.strokeStyle='red';
        context.arc(200,200,50,0,2*Math.PI,true);
        context.stroke();

        context.closePath();

• 繪制文字
  使用fillText(string,x,y)函數來繪制一段文字，string代表要繪制的問題，x、y代表起點坐標。strokeText(string,x,y)函數繪制空心文字。

/* -------  繪制文字 --------------*/
        context.beginPath();
        //設置字體
        context.font="Bold 20px Arial";
        //設置對齊方式
        context.textAlign="left";
        context.lineWidth=2;
        context.fillStyle="slive";
        context.fillText("Hello ",300,300);
        context.strokeText("world!",400,400);

        context.closePath();

• 繪制圖片
  繪制圖片之前必須首先加載圖像。

        var img=new Image();//創建對象
        img.src="img/login2.jpg";//加載圖片

        img.onload=function(){
        //加載圖像
            if(img.width!=canvas.width){
                canvas.width=img.width;
            }
            if(img.height!=canvas.height){
                canvas.height=img.height;
            }
            context.drawImage(img,0,0);
        }

• 保存、加載上下文設置

context.save(); 

context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 5;
context.shadowColor = "rgba(0,0,0,0.5)";

context.fillStyle = "#CC0000";
context.fillRect(10,10,150,100);

context.restore(); 
context
context.fillStyle = "#000000";
context.fillRect(180,10,150,100);

上面代碼先用save方法，保存了當前設置，然后繪制了一個有陰影的矩形。接著，使用restore方法，恢復了保存前的設置，繪制了一個沒有陰影的矩形。

四、像素處理

Paste_Image.png