<sub id="3ft55"></sub>

<noframes id="3ft55"><form id="3ft55"><listing id="3ft55"></listing></form>
<form id="3ft55"></form>

      <address id="3ft55"></address><address id="3ft55"><address id="3ft55"><listing id="3ft55"></listing></address></address>

        html5 canvas 畫圖教程案例分析_HTML5教程

        編輯Tag賺U幣

        推薦:用HTML5實現手機搖一搖的功能的教程
        手機上的搖一搖功能不錯.怎么實現的呢

        雖然大家都稱Canvas為html5的新標簽,看起來好像Canvas屬于html語言的新知識,但其實Canvas畫圖是通過javascript來做的。所以,如果你想學習Canvas畫圖,你必須要有Javascript基礎。
        另外,畫圖嘛,總有一些圖像方面的術語和知識點,所以如果你有過做圖或美工經驗,學習Canvas會更容易。
        Canvas,意為畫布也。而Html5中的Canvas也真的跟現實生活中的畫布非常相似。所以,把他看成一塊實實在在的畫布可以加快理解。

        畫布
        用canvas作畫,首先,你需要有一塊“畫布”。如果你的書架里面沒有畫布,你可以買一卷回來放進去。當然,在網頁里面我們不需要花錢買,直接寫一個canvas即可,類似:

        復制代碼 代碼如下:www.xyyouth.net.cn

        <canvas id="cvs" width="800" height="600">你的瀏覽器不支持canvas</canvas>

        其中標簽里面的文字是給不支持canvas的瀏覽器看的,支持的永遠看不到。

        注意:這個畫布的特性有必要說一下,他和IMG一樣,有兩個原生的屬性,即width和height.同時,因為他也是一個html元素,所以他也可以使用css來定義width和height,但是,千萬要注意:他自身的寬高和通過css定義的寬高是不一樣的!
        我們用JS來改變Canvas的原生寬高,是這樣的:

        復制代碼 代碼如下:www.xyyouth.net.cn

        canvas.width= 400
        canvas.height = 300

        但用JS通過操作CSS來改變Canvas的寬高,則是這樣:

        復制代碼 代碼如下:www.xyyouth.net.cn

        canvas.style.width = '400px'
        canvas.style.height = '300px'

        看得出來,語法上區別是很明顯的。實際上區別更明顯。
        他們的區別是什么?
        比如一塊寬1000的畫布,你在畫布左側畫了一條豎線,寬100像素。此時你把畫布自身的width設為500,相當于把畫布的右半邊咔嚓掉了,但此時那豎線的寬度還是100。
        但如果你通過CSS來把畫布的寬度變成500,那就相當于把畫布由1000擠壓到500,所以豎線的寬度變成了50.
        (這只是理論情況,實際上設置canvas的原生寬度時,他會清空掉已畫出來的內容。。)
        Canvas自身的寬高就是畫布本身的屬性,而css給他的寬高則可以看作是縮放,如果你縮放的太過隨意,那么畫布上的圖形可能變得你自己都認不出來。
        所以有個建議:除非特殊情況,一定不要用css來定義Canvas的寬高。
        畫布有了,現在我們把他拿出來:

        復制代碼 代碼如下:www.xyyouth.net.cn

        var cvs = document.getElementById('cvs');

        看,跟獲取其他元素的辦法一模一樣。

        畫筆
        現在畫布已經有了,想往上面涂鴉,當然還需要一只筆。canvas取得筆的方法如下:

        復制代碼 代碼如下:www.xyyouth.net.cn

        var ctx = cvs.getContext('2d');

        其中getContext方法就是用來拿筆的,但這里還有個參數:2d,這是什么意思呢?這個可以看作是畫筆的種類。
        既然有2D,那么就會有3d了?以后估計會有,但現在沒有。所以我們先用這只2d的筆吧。
        !那么我們可以多放幾只筆來備用嗎?答案是不能。
        我要問一個問題:你畫圖的時候是同時用幾只筆呢?相信99.9%的人都是只能用一只,雖然有些武林高手比如小龍女之類的可以兩只手同時畫,但這對一般人來說很不現實,是不是?
        所以現在你可以感到欣慰了,因為HTML5/">html5的canvas標簽也只支持同時用一支筆!
        有的寫JS寫的比較熟的同學可能會想耍個小聰明:我用前面獲取畫筆的方法多整幾只筆出來,不就行了?!

        比如

        復制代碼 代碼如下:www.xyyouth.net.cn

        var con = cvs.getContext('2d');
        var ctx = cvs.getContext('2d');

        哈哈哈哈,好像成功了,在沒測試之前我也是這么想的,但,其實這只是一個幻覺!
        因為我發現,我把其中一支筆蘸上紅墨水,另外一支筆也自動蘸上了紅墨水!因為兩支筆是一體的!fuck。
        如果你需要畫出不同的顏色,辦法就是把這只唯一的“筆”不停的蘸上新顏色。
        這其實不是一個優點,是個缺陷,以后你會體會到的。

        坐標
        2d世界,就是平面,在一個平面上確定一個點,需要兩個值,x坐標和y坐標。這是一個很重要的基礎概念,不過由于大家都學過數學我也就不多講了。
        canvas的原點是左上角,跟flash一樣。但蛋疼的是數學中的原點是左下角。這個…只能說習慣就好

        其他
        canvas有一個和現實的畫布不一樣的特點就是,他默認是透明的,沒有背景色。這在大部分時候非常重要。

        分享:HTML5 實現一個訪問本地文件的實例
        今天,我將向大家分享一個簡單的應用,用來演示使用FileReader的方法, FileReader是HTML5里提供的一個文件操作API,需要的朋友可以了解下

        來源:未知//所屬分類:HTML5教程/更新時間:2013-04-22
        相關HTML5教程
        夫妻性生生活视频 - 视频 - 在线观看 - 影视资讯 - 品爱网