怎么用H5繪圖-創(chuàng)新互聯(lián)

這篇文章主要介紹“怎么用H5繪圖”，在日常操作中，相信很多人在怎么用H5繪圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用H5繪圖”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司：2013年至今為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為近千家公司企業(yè)提供了專業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)和網(wǎng)站推廣服務(wù)，按需網(wǎng)站制作由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

一、坐標(biāo)系

其實(shí)只要玩過一點(diǎn)點(diǎn)圖形編程的人都知道，電腦上的坐標(biāo)系和數(shù)學(xué)上的坐標(biāo)系稍微有點(diǎn)不同，坐標(biāo)的原點(diǎn)在繪制區(qū)域（這里是Canvas）的左上角，X軸正向朝右，Y軸正向朝下，如下圖

怎么用H5繪圖

聲明：為本文為原創(chuàng)文章，作者保留所有權(quán)利！歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者左洸和出處博客園

二、Stroke 和 Fill

HTML5中將圖形分為兩大類：

第一類稱作 Stroke，我的理解就是輪廓、勾勒或者線條，總之，圖形是由線條組成的；

第二類稱作 Fill，就是填充區(qū)域

上下文對象中有兩個(gè)繪制矩形的方法，可以讓我們很好的理解這兩大類圖形的區(qū)別：

一個(gè)是 strokeRect，還有一個(gè)是 fillRect

下面的代碼分別用這兩個(gè)方法來繪制矩形，你可以分別點(diǎn)擊兩個(gè)按鈕來看看有什么不同，從而理解 stroke 和 fill 的區(qū)別
設(shè)置畫布

代碼如下:

<canvas id="test1" width="200" height="200" style=" 
background-color
: grey">你的瀏覽器不支持 &lt;canvas&gt;標(biāo)簽，請使用 
Chr
ome 瀏覽器 或者 FireFox 瀏覽器</canvas> 
<input type="button" value="strokeRect" 
onclick
="strokeRect();"/> 
<input type="button" value="fillRect" onclick="fillRect();"/>

strokeRect 和 fillRect

代碼如下:

function strokeRect(){ 
var canvas = 
document
.getElementById('test1'); 
var ctx=canvas.getContext("2d"); 
ctx.
clear
Rect(0,0,200,200); 
ctx.strokeStyle="blue"; 
ctx.strokeRect(10,10,180,180); 
} 
function fillRect(){ 
var canvas = document.getElementById('test1'); 
var ctx=canvas.getContext("2d"); 
ctx.clearRect(0,0,200,200); 
ctx.fillStyle="blue"; 
ctx.fillRect(10,10,180,180); 
}

你的瀏覽器不支持 <canvas>標(biāo)簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器

三、顏色

上下文對象有兩個(gè)屬性可以用來設(shè)置顏色：strokeStyle 和 fillStyle

strokeStyle 的值決定了你當(dāng)前要繪制的線條的顏色

fillStyle 的值決定了你當(dāng)前要填充的區(qū)域的顏色

顏色值應(yīng)該是符合CSS3 顏色值標(biāo)準(zhǔn)的有效字符串。下面的例子都表示同一種顏色。

//
這些 fillStyle 的值均為 '橙色'，ctx 是上下文對象 
ctx.fillStyle = "orange"; 
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)"; 
ctx.fillStyle = "rgba(255,165,0,1)";

關(guān)于顏色，以后會有更多的說明。

四、基本繪圖

除了上面給出的兩個(gè)繪制矩形的方法外，上下文對象還有幾個(gè)方法可以用來繪制一些基本圖形，如下：

moveTo(x,y)：moveTo方法并不能畫出任何東西，它只是將畫筆的當(dāng)前點(diǎn)移動(dòng)到(x,y)處

lineTo(x,y)：從當(dāng)前點(diǎn)到（x,y）點(diǎn)繪制一條直線。注意：繪制完成后，當(dāng)前點(diǎn)就變成了(x,y)，除非你用 moveTo 方法去改變他

arc(x, y, radius, startAngle, endAngle, anticlockwise) ：繪制一條弧線

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ：這兩個(gè)方法都是繪制貝葉斯曲線，具體用法看參考手冊

rect(x, y, width, height) ：繪制一個(gè)矩形。注意：當(dāng)它被調(diào)用時(shí)，moveTo 方法會自動(dòng)被調(diào)用，參數(shù)為(0,0)，于是起始坐標(biāo)又恢復(fù)成初始原點(diǎn)了。

有了直線、弧線、曲線、方形和圓形這幾種基本圖形，我們就可以組合出更復(fù)雜的圖形了

五、理解繪制路徑 Drawing Path

上一篇文章中說過，我們繪制的圖形是先繪制到一個(gè)抽象的上下文對象中（其實(shí)就是內(nèi)存中），然后再將上下文對象輸出到顯示設(shè)備上，這個(gè)輸出到顯示設(shè)備的過程不需要我們操心。但是有時(shí)候我們并不想立刻輸出每一次繪制動(dòng)作，也許我想讓一組繪制動(dòng)作完成以后，再集中一塊輸出，比如一個(gè)圍棋棋盤有19×19條直線組成，正常情況下需要向想顯示設(shè)備輸出19×19次，但是如果我們先暫停向顯示設(shè)備輸出，等在上下文中（內(nèi)存中）全部繪制完成19×19條直線時(shí)，再向顯示設(shè)備輸出，只需要輸出一次就可以了。

這種情況在HTML5中叫做繪制路徑，它由幾個(gè)上下文對象的方法組成：

beginPath() ：開始路徑，意思就是在你調(diào)用這個(gè)方法后，你繪制的圖形就不會再向屏幕輸出了，而只是畫到了上下文對象中（內(nèi)存中）

stroke() ：將你調(diào)用 beginPath 方法以后繪制的所有線條，一次性輸出到顯示設(shè)備上

closePath() ：如果你調(diào)用 beginPath 方法以后，在上下文對象中進(jìn)行了一系列的繪制，但是得到的圖形是不閉合的，這個(gè)方法將會幫你補(bǔ)上最后一條直線，將你的圖形閉合起來。

注意：closePath并不向屏幕輸出圖形，而只是在上下文對象中補(bǔ)上一條線，這個(gè)步驟不是必需的。

fill() ：

如果你的繪制路徑組成的圖形是封閉的，這個(gè)方法將用 fillStyle 設(shè)置的顏色填充圖形，然后立即向屏幕輸出；

如果繪制路徑不是封閉的，這個(gè)方法會先將圖形閉合起來，然后再填充輸出。

注意：所有的 fill 圖形，如 fillRect 等，都是立刻向屏幕輸出的，他們沒有繪制路徑這個(gè)概念

下面的代碼將繪制一個(gè)簡單的填充三角形。

注意：繪制三角形的時(shí)候，默認(rèn)的背景色為白色，默認(rèn)的前景色為黑色。
設(shè)置畫布

代碼如下:

<canvas id="test2" width="200" height="200" style="border:1px solid #c3c3c3;">你的瀏覽器不支持 &lt;canvas&gt;標(biāo)簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器</canvas> 
<input type="button" value="畫三角" onclick="drawTri();"/> 
<input type="button" value="清除" onclick="clearTri();"/>

繪制三角形

代碼如下:

<script type="text/javascript">
 function drawTri(){ 
 var canvas = document.getElementById('test2'); 
 var ctx=canvas.getContext("2d"); ctx.beginPath(); 
 ctx.moveTo(75,50); 
 ctx.lineTo(100,75); 
 ctx.lineTo(100,25); 
 ctx.fill(); 
 } 
 function clearTri(){
  var canvas = document.getElementById('test2'); 
  var ctx=canvas.getContext("2d"); 
  ctx.clearRect(0,0,200,200); 
  } 
  </script>

你的瀏覽器不支持 <canvas>標(biāo)簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器

六、半個(gè)單位的坐標(biāo)

里還要回過頭來說說坐標(biāo)，下面的代碼是在畫布上繪制網(wǎng)格，點(diǎn)擊“畫網(wǎng)格”按鈕可以看見效果
設(shè)置畫布

代碼如下:

<canvas id="test2" width="200" height="200" style="border:1px solid #c3c3c3;">你的瀏覽器不支持 &lt;canvas&gt;標(biāo)簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器</canvas> 
<input type="button" value="畫三角" onclick="drawTri();"/> 
<input type="button" value="清除" onclick="clearTri();"/>

繪制三角形

代碼如下:

<script type="text/javascript"> 
function drawTri(){ 
var canvas = document.getElementById('test2'); 
var ctx=canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.moveTo(75,50); 
ctx.lineTo(100,75); 
ctx.lineTo(100,25); 
ctx.fill(); 
} 
function clearTri(){ 
var canvas = document.getElementById('test2'); 
var ctx=canvas.getContext("2d"); 
ctx.clearRect(0,0,200,200); 
} 
</script>

你的瀏覽器不支持 <canvas>標(biāo)簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器

這段代碼中，有一處奇怪的地方，就是坐標(biāo)循環(huán)是從0.5開始的，這是為什么呢？

如下圖，假如我想繪制一條從(1,0)到(1,3)的線，由于線的默認(rèn)寬度是一個(gè)像素，所以在我想象中應(yīng)該繪制成深綠色的部分，即在坐標(biāo) 1 兩邊各占半個(gè)像素的寬度。

然而，瀏覽器的最小單位是一個(gè)像素，所以他會向兩邊擴(kuò)展，實(shí)際繪制出來的淺綠色的部分，即占用了兩個(gè)像素的寬度。這樣，我們繪制的線條在坐標(biāo)上就不精確了

怎么用H5繪圖

如下圖，如果我們給出的起始坐標(biāo)是(1.5,0)和(1.5,3)，那么線條的寬度才是正確的一個(gè)像素。

怎么用H5繪圖

七、清空畫布

上面給出的兩段代碼中，我們都用到了清空畫布，用到的方法如下：

clearRect(x,y,width,height)：

它接受四個(gè)參數(shù)， x 和 y 指定矩形左上角(相對于原點(diǎn))的位置，width 和 height 是矩形的寬和高。調(diào)用該方法會將給出的矩形區(qū)域中所有繪制圖形都清空，露出畫布的背景

到此，關(guān)于“怎么用H5繪圖”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：怎么用H5繪圖-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article2/djjeoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、商城網(wǎng)站、做網(wǎng)站、網(wǎng)站設(shè)計(jì)、微信公眾號、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容