利用HTML5 Canvas API繪制矩形的超級攻略

2020-03-24 16:43:36

字體：大中小

來源：轉載

供稿：網友

divid= canvas-warp canvasid= canvas >運行結果：
乍一看沒啥問題，但是視力好的童鞋已經發現了，最后一筆閉合的時候有問題，導致左上角有一個缺口。這種情況是設置了lineWidth導致的。如果默認1筆觸的話，是沒有問題的。但是筆觸越大，線條越寬，這種缺口就越明顯。那么這種情況該怎么避免呢？
標題已經劇透了，使用clothPath()閉合圖形。
JavaScript Code復制內容到剪貼板
divid= canvas-warp canvasid= canvas >運行結果：
這個例子結合上節課的講解，我們知道了繪制路徑的時候需要將規劃的路徑使用beginPath()與closePath()包裹起來。當然，最后一筆可以不畫出來，直接使用closePath()，它會自動幫你閉合的。(所以如果你不想繪制閉合圖形就不可以使用closePath())
給矩形上色
這里我們要介紹一個和stroke()同等重要的方法fill()。和當初描邊一樣，我們在填色之前，也要先用fillStyle屬性選擇要填充的顏色。
比如我們要給上面的矩形涂上黃色，可以這樣寫。
JavaScript Code復制內容到剪貼板
divid= canvas-warp canvasid= canvas >運行結果：
這里需要注意的是一個良好的編碼規范。因為之前說過了Canvas是基于狀態的繪制，只有調用了stroke()和fill()才確定繪制。所以我們要把這兩行代碼放在最后，其余的狀態設置的代碼放在它們之前，將狀態設置與確定繪制的代碼分隔開。增強代碼的可讀性。
封裝繪制方法
大家一定發現了，繪制矩形其實都是這樣的四筆，我們每次用這種笨方法畫矩形都要畫這四筆有多麻煩，如果我們要花10個矩形？100個？1000個？都這樣寫，代碼會臃腫，復用性很低。這里，我們可以使用JavaScript封裝這些方法。我們知道，一個矩形可以由它的左上角坐標和其長寬唯一確定。
JavaScript函數
這里我們介紹一下JavaScript函數。如果有基礎的同學可以跳過這一大段，直接看后面的。
JavaScript 和 ActionScript 語言的函數聲明調用一樣，都是編程語言中最簡單的。
函數的作用
函數的作用，可以寫一次代碼，然后反復地重用這個代碼。如:我們要完成多組數和的功能。
JavaScript Code復制內容到剪貼板
如果要實現8組數的和，就需要16行代碼，實現的越多，代碼行也就越多。所以我們可以把完成特定功能的代碼塊放到一個函數里，直接調用這個函數，就省去重復輸入大量代碼的麻煩。
使用函數完成:
JavaScript Code復制內容到剪貼板
function定義函數的關鍵字，函數名你為函數取的名字，函數體替換為完成特定功能的代碼。
函數調用
函數定義好后，是不能自動執行的，需要調用它，直接在需要的位置寫函數名。一般有兩種方式：第一種情況：在 script 標簽內調用。JavaScript Code復制內容到剪貼板
第二種情況：在HTML文件中調用，如通過點擊按鈕后調用定義好的函數。這種情況以后用到了再說。
有參數的函數
格式如下：
JavaScript Code復制內容到剪貼板
注意:參數可以多個，根據需要增減參數個數。參數之間用(逗號，）隔開。
按照這個格式，函數實現任意兩個數的和應該寫成：
JavaScript Code復制內容到剪貼板
x和y則是函數的兩個參數，調用函數的時候，我們可通過這兩個參數把兩個實際的加數傳遞給函數了。
例如，add2(3，4)會求3+4的和，add2(60,20)則會求出60和20的和。
返回值函數
JavaScript Code復制內容到剪貼板
sum=x+y; returnsum;//返回函數值,return后面的值叫做返回值。 }
這里的return和其他語言中的一樣，但是在JS或者AS等弱類型語言中，返回值類型是不需要寫到函數聲明里的。至此，我們把JavaScript函數也順便系統的說了一下。下面回到正題~
我們也可以封裝一下我們的矩形，代碼如下：
JavaScript Code復制內容到剪貼板
divid= canvas-warp canvasid= canvas >運行結果：
使用rect()方法繪制矩形
猶豫繪制矩形是常用的方法，所以在Canvas API中已經幫我們封裝好了一個繪制矩形的方法 rect()。這個方法接收4個參數x, y, width, height，實際調用時也就是
JavaScript Code復制內容到剪貼板
functiondrawRect(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(); }
調用封裝方法，繪制魔性圖像
來個有魔性的圖像~
好，我們就拿它開刀，練練手，給咱剛封裝好的方法活動活動筋骨。
JavaScript Code復制內容到剪貼板
divid= canvas-warp canvasid= canvas >運行結果：
是不是很有魔性？是不是非常的酷？這段代碼就不花篇幅解釋了，大家自己課下琢磨琢磨，也可以嘗試著用已經學過的知識去繪制一個酷酷的圖像。這節課內容有點多，其實也只是介紹了四個屬性和方法 closePath()、fillStyle、fill()、rect()，還有一個擴展的JavaScript函數講解。Canvas實現圖片圓角效果
本規則適用于各種Canvas繪制的規則或不規則圖形。Canvas實現圖片圓角的關鍵是使用紋理填充。Canvas中有個名為createPattern的方法，可以讓已知尺寸的圖片元素轉換成紋理對象，作填充用。舉個板栗，如果實現名為test.jpg的圖片圓形效果，大小100px * 100px, 則主要JS代碼如下：JavaScript Code復制內容到剪貼板
//canvas元素,圖片元素 varcanvas=document.querySelector( #canvas ),image=newImage(); varcontext=canvas.getContext( 2d ); image.onload=function(){ //創建圖片紋理 varpattern=context.createPattern(image, no-repeat ); //繪制一個圓 context.arc(50,50,50,0,2*Math.PI); //填充繪制的圓 context.fillStyle=pattern; context.fill(); }; image.src= test.jpg ;
讓Canvas上下文的fillStyle屬性值等于這個紋理對象就可以了。Canvas自帶的矩形繪制API是不帶圓角屬性的，因此，demo中的圓角矩形使用了自定義方法。我簡單瞅了瞅，要實現垂直、水平方向不同圓角大小略折騰，本著示意的目的，就沒大動干戈，所以demo的圓角是對稱的。
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：常用html元素總結包括基本結構、文檔類型、頭部、主體等等

下一篇：HTML5 拖放功能實現代碼