成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Canvas基礎(chǔ)知識(shí)(一)

miya / 1014人閱讀

摘要：是新增的標(biāo)簽，是個(gè)圖形容器。允許在其區(qū)域內(nèi)進(jìn)行繪制。其它大小由和決定。的創(chuàng)建標(biāo)簽只有和兩個(gè)屬性，在沒(méi)有設(shè)置它們的情況下，默認(rèn)大小為。只有一個(gè)參數(shù)，就是上下文的格式。下面的代碼用于檢測(cè)瀏覽器的是否支持支持不支持

canvas是Html5新增的標(biāo)簽，是個(gè)圖形容器。允許JavaScript在其區(qū)域內(nèi)進(jìn)行繪制。其它大小由width和height決定。

canvas的創(chuàng)建

;
canvas標(biāo)簽只有width和height兩個(gè)屬性，在沒(méi)有設(shè)置它們的情況下，canvas默認(rèn)大小為300X150。同時(shí)，如果用css來(lái)設(shè)置canvas的大小會(huì)出問(wèn)題，推薦直接在canvas標(biāo)簽里設(shè)置大小或者通過(guò)JavaScript來(lái)設(shè)置大小。

canvas能做什么？

動(dòng)畫(huà)

圖形

游戲

字體

獲得上下文

canvas只有獲得上下文之后，才能在它的上面繪畫(huà)。getContext()方法就是來(lái)獲取上下文和繪畫(huà)功能的。getContext()只有一個(gè)參數(shù)，就是上下文的格式。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
清空畫(huà)布的方法

1.重設(shè)canvas的高度或者寬度：
由于canvas每當(dāng)高度或?qū)挾缺恢卦O(shè)時(shí)，畫(huà)布內(nèi)容就會(huì)被清空，因此可以用以下方法清空

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    canvas.height=canvas.height;
    }

2.使用clearRect方法：

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    }

3.可以用某一特定的顏色填充畫(huà)布，從而到達(dá)清空的目的：

function clearCanvas()  
{  
    var canvas=document.getElementById("Canvas");  
    var ctx= canvas.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}
檢查瀏覽器是否支持

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，但是 IE8及以下都不支持canvas。下面的代碼用于檢測(cè)瀏覽器的是否支持canvas
var canvas = document.getElementById("canvas");
if (canvas.getContext){

var ctx = canvas.getContext("2d");
// 支持

} else {

// 不支持

}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93568.html

相關(guān)文章

  • canvas基礎(chǔ)知識(shí)點(diǎn)（一）

    摘要：給設(shè)置寬高標(biāo)簽的寬高默認(rèn)是是一個(gè)行內(nèi)塊元素可以在標(biāo)簽上通過(guò)，來(lái)設(shè)置可以在中給對(duì)象設(shè)置注意不要通過(guò)來(lái)調(diào)整的寬高導(dǎo)致內(nèi)部的畫(huà)布被拉伸，圖形變形獲取畫(huà)筆工具繪圖都是通過(guò)標(biāo)簽的畫(huà)筆來(lái)進(jìn)行的注意，不要寫(xiě)成，里面?zhèn)魅氲膮?shù)目前也只有這一種情況描邊和填充 給canvas設(shè)置寬高： canvas標(biāo)簽的寬高默認(rèn)是300*150,是一個(gè)行內(nèi)塊元素 可以在canvas標(biāo)簽上通過(guò)width，height...

    ephererid 評(píng)論0 收藏0

  • 【30分鐘學(xué)完】canvas動(dòng)畫(huà)|游戲基礎(chǔ)(2)：從零開(kāi)始畫(huà)畫(huà)

    摘要：前言上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。完整實(shí)例一個(gè)會(huì)跟蹤鼠標(biāo)位置的箭頭三角函數(shù)上下運(yùn)動(dòng)終于順利過(guò)渡到三角函數(shù)的話(huà)題笑。 前言 上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講canvas的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有canvas基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。 本人能力...

    anyway 評(píng)論0 收藏0

  • 【30分鐘學(xué)完】canvas動(dòng)畫(huà)|游戲基礎(chǔ)(2)：從零開(kāi)始畫(huà)畫(huà)

    摘要：前言上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。完整實(shí)例一個(gè)會(huì)跟蹤鼠標(biāo)位置的箭頭三角函數(shù)上下運(yùn)動(dòng)終于順利過(guò)渡到三角函數(shù)的話(huà)題笑。 前言 上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講canvas的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有canvas基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。 本人能力...

    Baoyuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

miya

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<