真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

   
   
   
       
       
   
   
   
   
   
       
       
   
   
   
       
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   
       

   
   
   
       
       
   
   
   
       
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧?。?nbsp;  
       

   
   
   
       
       
   
   
   
       
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
       

運(yùn)行結(jié)果：

這里需要注意的是一個(gè)良好的編碼規(guī)范。因?yàn)橹罢f(shuō)過(guò)了Canvas是基于狀態(tài)的繪制，只有調(diào)用了stroke()和fill()才確定繪制。所以我們要把這兩行代碼放在最后，其余的狀態(tài)設(shè)置的代碼放在它們之前，將狀態(tài)設(shè)置與確定繪制的代碼分隔開。增強(qiáng)代碼的可讀性。

封裝繪制方法
大家一定發(fā)現(xiàn)了，繪制矩形其實(shí)都是這樣的四筆，我們每次用這種笨方法畫矩形都要畫這四筆有多麻煩，如果我們要花10個(gè)矩形？100個(gè)？1000個(gè)？都這樣寫，代碼會(huì)臃腫，復(fù)用性很低。這里，我們可以使用JavaScript封裝這些方法。我們知道，一個(gè)矩形可以由它的左上角坐標(biāo)和其長(zhǎng)寬唯一確定。
JavaScript函數(shù)
這里我們介紹一下JavaScript函數(shù)。如果有基礎(chǔ)的同學(xué)可以跳過(guò)這一大段，直接看后面的。
JavaScript 和 ActionScript 語(yǔ)言的函數(shù)聲明調(diào)用一樣，都是編程語(yǔ)言中最簡(jiǎn)單的。
函數(shù)的作用
函數(shù)的作用，可以寫一次代碼，然后反復(fù)地重用這個(gè)代碼。如:我們要完成多組數(shù)和的功能。

var sum;      
sum = 3+2;   
alert(sum);   
  
sum=7+8 ;   
alert(sum);    
  
....  //不停重復(fù)兩行代碼

如果要實(shí)現(xiàn)8組數(shù)的和，就需要16行代碼，實(shí)現(xiàn)的越多，代碼行也就越多。所以我們可以把完成特定功能的代碼塊放到一個(gè)函數(shù)里，直接調(diào)用這個(gè)函數(shù)，就省去重復(fù)輸入大量代碼的麻煩。
使用函數(shù)完成:

function add2(a,b){   
    sum = a + b;   
     alert(sum);   
} //  只需寫一次就可以   
  
add2(3,2);   
add2(7,8);   
....  //只需調(diào)用函數(shù)就可以

定義函數(shù)
如何定義一個(gè)函數(shù)呢？看看下面的格式：

function  函數(shù)名( )   
{   
     函數(shù)體;   
}

function定義函數(shù)的關(guān)鍵字，“函數(shù)名”你為函數(shù)取的名字，“函數(shù)體”替換為完成特定功能的代碼。
函數(shù)調(diào)用
函數(shù)定義好后，是不能自動(dòng)執(zhí)行的，需要調(diào)用它，直接在需要的位置寫函數(shù)名。一般有兩種方式：

第一種情況：在

第二種情況：在HTML文件中調(diào)用，如通過(guò)點(diǎn)擊按鈕后調(diào)用定義好的函數(shù)。

這種情況以后用到了再說(shuō)。
有參數(shù)的函數(shù)
格式如下：

function 函數(shù)名(參數(shù)1,參數(shù)2)   
{   
     函數(shù)代碼   
}

注意:參數(shù)可以多個(gè)，根據(jù)需要增減參數(shù)個(gè)數(shù)。參數(shù)之間用(逗號(hào)，）隔開。
按照這個(gè)格式，函數(shù)實(shí)現(xiàn)任意兩個(gè)數(shù)的和應(yīng)該寫成：

function add2(x,y)   
{   
   sum = x + y;   
   document.write(sum);   
}

x和y則是函數(shù)的兩個(gè)參數(shù)，調(diào)用函數(shù)的時(shí)候，我們可通過(guò)這兩個(gè)參數(shù)把兩個(gè)實(shí)際的加數(shù)傳遞給函數(shù)了。
例如，add2(3，4)會(huì)求3+4的和，add2(60,20)則會(huì)求出60和20的和。
返回值函數(shù)

function add2(x,y)   
{   
   sum = x + y;   
   return sum; //返回函數(shù)值,return后面的值叫做返回值。   
}

這里的return和其他語(yǔ)言中的一樣，但是在JS或者AS等弱類型語(yǔ)言中，返回值類型是不需要寫到函數(shù)聲明里的。

至此，我們把JavaScript函數(shù)也順便系統(tǒng)的說(shuō)了一下。下面回到正題~
我們也可以封裝一下我們的矩形，代碼如下：

   
   
   
       
       
   
   
   
       
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
       
   
  
   
   
   
   

運(yùn)行結(jié)果：

使用rect()方法繪制矩形
猶豫繪制矩形是常用的方法，所以在Canvas API中已經(jīng)幫我們封裝好了一個(gè)繪制矩形的方法——rect()。這個(gè)方法接收4個(gè)參數(shù)x, y, width, height，實(shí)際調(diào)用時(shí)也就是

context.rect(x,y,width,height);

基于此，我們幫剛才封裝的方法優(yōu)化一下。

function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){   
        cxt.beginPath();   
        cxt.rect(x, y, width, height);   
        //cxt.closePath();    可以不用closePath()   
  
        cxt.lineWidth = borderWidth;   
        cxt.strokeStyle = borderColor;   
        cxt.fillStyle = fillColor;   
  
        cxt.fill();   
        cxt.stroke();   
}

調(diào)用封裝方法，繪制魔性圖像
來(lái)個(gè)有魔性的圖像~

好，我們就拿它開刀，練練手，給咱剛封裝好的方法活動(dòng)活動(dòng)筋骨。

   
   
   
       
       
   
   
   
       
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   
       
   
  
   
   
   
   

運(yùn)行結(jié)果：

是不是很有魔性？是不是非常的酷？這段代碼就不花篇幅解釋了，大家自己課下琢磨琢磨，也可以嘗試著用已經(jīng)學(xué)過(guò)的知識(shí)去繪制一個(gè)酷酷的圖像。這節(jié)課內(nèi)容有點(diǎn)多，其實(shí)也只是介紹了四個(gè)屬性和方法——closePath()、fillStyle、fill()、rect()，還有一個(gè)擴(kuò)展的JavaScript函數(shù)講解。

Canvas實(shí)現(xiàn)圖片圓角效果
本規(guī)則適用于各種Canvas繪制的規(guī)則或不規(guī)則圖形。

Canvas實(shí)現(xiàn)圖片圓角的關(guān)鍵是使用“紋理填充”。

Canvas中有個(gè)名為createPattern的方法，可以讓已知尺寸的圖片元素轉(zhuǎn)換成紋理對(duì)象，作填充用。

舉個(gè)板栗，如果實(shí)現(xiàn)名為test.jpg的圖片圓形效果，大小100px * 100px, 則主要JS代碼如下：

// canvas元素, 圖片元素   
var canvas = document.querySelector("#canvas"), image = new Image();   
var context = canvas.getContext("2d");   
  
image.onload = function() {   
    // 創(chuàng)建圖片紋理   
    var pattern = context.createPattern(image, "no-repeat");   
    // 繪制一個(gè)圓   
    context.arc(50, 50, 50, 0, 2 * Math.PI);   
    // 填充繪制的圓   
    context.fillStyle = pattern;   
    context.fill();       
};   
image.src = "test.jpg";

讓Canvas上下文的fillStyle屬性值等于這個(gè)紋理對(duì)象就可以了。

Canvas自帶的矩形繪制API是不帶圓角屬性的，因此，demo中的圓角矩形使用了自定義方法。我簡(jiǎn)單瞅了瞅，要實(shí)現(xiàn)垂直、水平方向不同圓角大小略折騰，本著示意的目的，就沒(méi)大動(dòng)干戈，所以demo的圓角是對(duì)稱的。

以上是“如何利用HTML5 Canvas API繪制矩形”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！