html5的canvas繪制線條，moveTo和lineTo詳解

 今天在看html5，里面新增的屬性有一個canvas，它相當於一個畫布你可以用js在里面畫你想要的效果！我在w3c的手冊里面看到用moveTo和lineTo繪制線條講的不是很清楚，尤其是moveTo和lineTo函數沒有說的很明白！所以特地在這里與新手朋友分享一下我的理解！

 

 

    一、w3c里面的代碼和實現效果

    手冊的代碼是這樣的

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d"); cxt.moveTo(10, 10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();

    

實現的效果是這樣的

 

    二、詳細講解每一個步驟

    1，獲取id值為myCanvas的canvas標簽並賦值給c！（指定在哪里畫）

    2，

c.getContext('2d');

    3,    手冊上說是返回一個用於在畫布上繪圖的環境，2d表示二維繪圖！（指定畫出的圖案的類型）

cxt.moveTo(10, 10);

    

指定義了一個起點，坐標是（20,20）！這時候的起點如下圖

    4，

cxt.lineTo(150, 50);

    (1)添加一條直線，起點是第3步設置的(10, 10)，終點現在設置的(150, 50)！    這有兩個功能：

    (2)設置新的起點為(150, 50)，相當於又來了一句cxt.moveTo(150, 50);而這時候的起點如下圖

    5，

cxt,lineTo(10, 50);

        跟上一條語句功能相同，這時候起點如下圖

    6,

cxt.stroke();

    上面做了那么多的事情但始終沒有在網頁上面畫出了，而這個語句就是將你以上所有做的事都在網頁上面呈現出來！所以如果你要測試線條或者圖案效果的話，一定不要忘了這一句，不然網頁上面是什么都顯示不出啦的

想要每天及時獲取王業樓的個人博客更新的內容嗎？趕快添加微信公眾號“ly89cn”，或者掃描下方的二維碼吧！

 

本文來源於王業樓的個人博客，本文地址：http://www.ly89.cn/detailB/60.html

歡迎分享本文，轉載請注明本文出處和地址