摘要：繪制一條從當(dāng)前位置到指定以及位置的直線。該方法有兩個(gè)參數(shù)以及，代表坐標(biāo)系中直線結(jié)束的點(diǎn)。一個(gè)路徑，甚至一個(gè)子路徑，都是閉合的。使用路徑繪制圖形需要一些額外的步驟。當(dāng)前瀏覽器不支持重繪最外層邊框一個(gè)簡(jiǎn)單的七巧板就出來啦

是 HTML5 新增的元素之一，它允許腳本語言動(dòng)態(tài)渲染位圖像。最初是由 Apple 引入，用于 Mac OS X 的儀表盤，后來又在 Safiri 和 Google Chrome 中被實(shí)現(xiàn)。 就像個(gè)神奇的畫布，你可以在上面畫出你想要的絢麗的效果。使用元素之前，需要一些基本的 HTML 和 Javascript 知識(shí)。 元素不被一些老的瀏覽器支持，但是主流的高級(jí)瀏覽器都支持。

1. 元素

您的瀏覽器不支持canvas！

如果沒有設(shè)置寬度和高度的時(shí)候，canvas 會(huì)默認(rèn)設(shè)置寬為300px，高為150px。當(dāng)瀏覽器不支持 canvas 時(shí)，會(huì)將中間的文字打印出來。上面代碼中，為了讓畫布更加明顯，添加了css 樣式便于查看。

2. 渲染上下文

canvas 元素創(chuàng)造了一個(gè)固定大小的畫布，并且公開了渲染上下文對(duì)象，它可以用來繪制和處理要展示的內(nèi)容。Canvas API 定義在 context這個(gè)對(duì)象上，因此要用getContext方法來獲取這個(gè)對(duì)象。

var canas = document.getElementById("canvas");
// 繪制2D圖像的上下文環(huán)境
var context = canvas.getContext("2d");

上面代碼中，getContext方法指定參數(shù)‘2d’，表示該canvas對(duì)象繪制2d圖像，執(zhí)行后的效果為下圖一個(gè)藍(lán)色邊框的舉重的矩形。

3. 柵格

在繪制圖像之前，我們要先了解什么是柵格，通常來說網(wǎng)格中的一個(gè)單元相當(dāng)于canvas元素中的一像素。柵格的起點(diǎn)為左上角（坐標(biāo)為（0,0））。所有元素的位置都相對(duì)于原點(diǎn)定位。所以圖中藍(lán)色方形左上角的坐標(biāo)為距離左邊（Y軸）x像素，距離上邊（X軸）y像素（坐標(biāo)為（x,y））。

4. 繪制圖像

好，現(xiàn)在可以開始繪制圖像了，首先要了解下繪制 moveTo()這個(gè)方法。

移動(dòng)筆觸 - 這個(gè)方法實(shí)際上并不能畫出任何東西，它就是起到移動(dòng)筆觸的作用，并且作為起始點(diǎn)。

moveTo(x,?y)將筆觸移動(dòng)到指定的坐標(biāo)x以及y上。

線 - 繪制直線，需要用到的方法lineTo()。

lineTo(x, y)繪制一條從當(dāng)前位置到指定x以及y位置的直線。

該方法有兩個(gè)參數(shù)：x以及y ，代表坐標(biāo)系中直線結(jié)束的點(diǎn)。開始點(diǎn)和之前的繪制路徑有關(guān)，之前路徑的結(jié)束點(diǎn)就是接下來的開始點(diǎn)，等等。。。開始點(diǎn)也可以通過moveTo()函數(shù)改變。

//繪制線條1
context.moveTo(0,0);
context.lineTo(100,100);
context.stroke();

路徑
圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。一個(gè)路徑，甚至一個(gè)子路徑，都是閉合的。使用路徑繪制圖形需要一些額外的步驟。

首先，要?jiǎng)?chuàng)建路徑起始點(diǎn)，然后使用畫圖命令去畫出路徑，之后封閉路徑。一旦路徑生成，就能通過描邊或填充路徑區(qū)域來渲染圖形。

常用到的函數(shù)：

beginPath()    新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。
closePath()    閉合路徑之后圖形繪制命令又重新指向到上下文中。
stroke()       通過線條來繪制圖形輪廓。
fill()         通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形。

生成路徑的第一步叫做beginPath()。本質(zhì)上，路徑是由很多子路徑構(gòu)成，這些子路徑都是在一個(gè)列表中，所有的子路徑（線、弧形、等等）構(gòu)成圖形。而每次這個(gè)方法調(diào)用之后，列表清空重置，然后我們就可以重新繪制新的圖形。

第二步就是調(diào)用函數(shù)指定繪制路徑，本文稍后我們就能看到了。

第三，就是閉合路徑closePath(),不是必需的。這個(gè)方法會(huì)通過繪制一條從當(dāng)前點(diǎn)到開始點(diǎn)的直線來閉合圖形。如果圖形是已經(jīng)閉合了的，即當(dāng)前點(diǎn)為開始點(diǎn)，該函數(shù)什么也不做。

了解完這些后，我們就能夠開始作出我們要的七巧板了～

首先，新建一個(gè)畫布

接著，為這個(gè)畫布添加事件

window.onload = function(){
            var canvas = document.getElementById("canvas");
            canvas.width = 600;
            canvas.height = 600;
            //繪制2d圖像的上下文環(huán)境
            var context = canvas.getContext("2d");

            //繪制左邊平行四邊形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(150,450);
            context.lineTo(450,450);
            context.lineTo(300,600);
            context.lineTo(0,600);
            context.fillStyle = "#FF1493";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪制左邊的大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(0,0);
            context.lineTo(300,300);
            context.lineTo(0,600);
            context.fillStyle = "#0000ff";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪制右邊的大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(0,0);
            context.lineTo(300,300);
            context.lineTo(600,0);
            context.fillStyle = "#FFFF00";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪制中間三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(300,300);
            context.lineTo(150,450);
            context.lineTo(450,450);
            context.fillStyle = "#FF7F50";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();


            //繪制中間小矩形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(450,150);
            context.lineTo(300,300);
            context.lineTo(450,450);
            context.lineTo(600,300);
            context.fillStyle = "#191970";
            context.strokeStyle ="#000000";
            context.fill();
            context.stroke();

            
            //繪制最右邊小三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(600,0);
            context.lineTo(450,150);
            context.lineTo(600,300);
            context.fillStyle = "#A52A2A";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪制右邊大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(600,300);
            context.lineTo(300,600);
            context.lineTo(600,600);
            context.fillStyle = "#00FFFF";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //繪制最外圍的邊框
            context.beginPath();//開始繪制路徑
            context.lineWidth = 10;//設(shè)置線條的寬度
            context.moveTo(0,0);//移動(dòng)筆觸
            context.lineTo(600,0);//繪制線條
            context.lineTo(600,600);
            context.lineTo(0,600);
            context.closePath();//封閉路徑
            context.stroke();//通過線條來繪制圖形輪廓
        };

優(yōu)化版本：

    
    
    


    
    
        當(dāng)前瀏覽器不支持cnavas        
    
    

一個(gè)簡(jiǎn)單的七巧板就出來啦～