《HTML5 Canvas游戲開發實戰》——2.1　繪制基本圖形

本節書摘來自華章計算機《HTML5 Canvas游戲開發實戰》一書中的第2章，第2.1節,作者：張路斌著， 更多章節內容可以訪問云棲社區“華章計算機”公眾號查看。

2.1　繪制基本圖形

所謂基本圖形，就是指線、矩形、圓等最簡單的圖形，任何復雜的圖形都是由這些簡單的圖形組合而成的。我們首先來了解一下這些簡單圖形的繪制方法。
2.1.1　畫線
你可能是第一次接觸Canvas繪圖。首先，我們通過繪制一個簡單的直線來學習Canvas的功能。其代碼如代碼清單2-1所示。
代碼清單　2-1

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的瀏覽器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.stroke();
</script>
</body>
</html>

運行后的效果圖如圖2-1所示。image

下面來解釋一下代碼清單2-1中的代碼。

<canvas id="myCanvas" width="200" height="100">
你的瀏覽器不支持HTML5
</canvas>

這是在HTML中嵌入Canvas標簽。Canvas標簽內部可以添加文字或HTML代碼，如果瀏覽不支持Canvas標簽，那么瀏覽器會自動跳過Canvas標簽而運行Canvas內部的HTML代碼。

var c=document.getElementById("myCanvas");

以上代碼是獲取HTML中的Canvas標簽。

var ctx=c.getContext("2d");

這里返回一個用來繪制環境類型的環境。它返回的是一個 CanvasRenderingContext2D 對象，該對象實現了一個畫布所使用的大多數方法。目前，Canvas只支持二維環境，所以參數只能是“2d”。當然，將來也可能會支持三維。

ctx.lineWidth = 10;

以上代碼用來設置線條寬度。

ctx.strokeStyle = "red";

此處設置畫筆顏色為紅色，這里的顏色值可以是英文字母，也可以直接使用顏色的RGB值，如紅色為“#ff0000”，黑色為rgb(0,0,0)等。

ctx.beginPath();

以上代碼創建一個新的路徑。

ctx.moveTo(10,10);

以上代碼將畫筆光標位置移動到坐標(10,10)處。

ctx.lineTo(150,50);

以上代碼從當前坐標開始移動畫筆到坐標(150,50)處，繪制一條直線。

ctx.stroke();

上面代碼表示開始繪制定義好的路徑。
以上過程其實和我們在紙上畫一條線是同樣的道理，首先我們要選擇一種顏色及線條的粗細，然后用畫筆從一個點開始畫到另一個點，這樣就可以畫出一條線了。
在畫線的時候，也可以使用lineCap來定義線帽的樣式，如在代碼清單2-2中，分別使用了lineCap的3種樣式。
代碼清單　2-2

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "red";ctx.lineCap="butt";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(150,10);
ctx.stroke();ctx.lineCap="round";
ctx.beginPath();
ctx.moveTo(10,40);
ctx.lineTo(150,40);
ctx.stroke();ctx.lineCap="square";
ctx.beginPath();
ctx.moveTo(10,70);
ctx.lineTo(150,70);
ctx.stroke();

運行代碼，可以看到3種不同的線帽，如圖2-2所示。

image

2.1.2　畫矩形
下面來看看如何畫一個矩形，其代碼如代碼清單2-3所示。
代碼清單　2-3

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.strokeRect(10,10,70,40);
</script>

運行效果如圖2-3所示。

image

在Canvas里，用strokeRect函數來繪制一個矩形，它需要4個參數，分別是：起點坐標x和坐標y、矩形長、矩形寬。
也可以用下面代碼來替換strokeRect函數，它可以實現同樣的功能。

ctx.rect(10,10,70,40);
ctx.stroke();

如果要繪制一個實心的矩形，可以用fillRect函數，如代碼清單2-4所示。
代碼清單　2-4

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.fillRect(10,10,70,40);
</script>

運行效果如圖2-4所示。

image

fillRect函數同樣需要4個參數，分別是：起點的坐標x和坐標y、矩形長、矩形寬。與strokeRect函數不同的是，畫實心圖形的時候，用fillStyle來定義圖形的顏色。
當然，這里也可用另一種實現方法繪制矩形，代碼如下：

ctx.rect(10,10,70,40);
ctx.fill();

2.1.3　畫圓
圓其實就是一個360度的圓弧。在Canvas中，可使用arc函數來畫一個圓弧。先看代碼清單2-5所示代碼。
代碼清單　2-5

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true);
ctx.stroke();
</script>

運行效果如圖2-5所示。

image

arc函數的6個參數分別是：圓弧中心的坐標x和坐標y、圓弧半徑、起始角度、終止角度、是否逆時針。需要解釋的是，第4個和第5個參數需要傳入的是圓弧的弧度，如要畫30度的角，需要將其轉化成弧度30*Math.PI/180；第6個參數用來控制圓弧是順時針旋轉還是逆時針旋轉。
和畫矩形一樣，同樣可以用fill函數來畫一個實心的圓弧，如代碼清單2-6所示。
代碼清單　2-6

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true);
ctx.fill();
</script>

運行效果如圖2-6所示。

image

畫圓時，只需要讓起始角度和終止角度之差為360度即可，具體代碼如代碼清單2-7所示。
代碼清單　2-7

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,360*Math.PI/180,true);
ctx.fill();
</script>

運行效果如圖2-7所示。

image

2.1.4　畫圓角矩形
Canvas中沒有直接畫圓角矩形的API，但是我們可以用arcTo函數來完成圓角的繪制，然后結合直線繪制，就可以完成圓角矩形的繪制了。在繪制圓角矩形之前，我們先來繪制一個圓角，如代碼清單2-8所示。
代碼清單　2-8

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);
ctx.lineTo(70,20);
ctx.arcTo(120,30,120,70,50);
ctx.lineTo(120,120);
ctx.stroke(); </script>

運行效果如圖2-8所示。

image

在代碼清單2-8中，arcTo函數是用來為當前的子路徑添加一條圓弧的，它需要5個參數，分別是：點P1的坐標x和坐標y、點P2的坐標x和坐標y、圓弧的半徑radius。該圓弧有一個點與當前位置到 P1 的線段相切，還有一個點和從 P1 到 P2 的線段相切。這兩個切點就是圓弧的起點和終點，圓弧繪制的方向就是連接這兩個點的最短圓弧的方向。
在很多常見的應用中，圓弧開始于當前位置而結束于 P2，但情況并不總是這樣。如果當前的位置和圓弧的起點不同，這個方法將會添加一條從當前位置到圓弧起點的直線，而且總是將當前位置設置為圓弧的終點。
有了對arcTo函數的了解，畫圓角矩形就簡單多了，如代碼清單2-9所示。
代碼清單　2-9

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(40,20);
ctx.lineTo(100,20);
ctx.arcTo(120,20,120,40,20);
ctx.lineTo(120,70);
ctx.arcTo(120,90,100,90,20);
ctx.lineTo(40,90);
ctx.arcTo(20,90,20,70,20);
ctx.lineTo(20,40);
ctx.arcTo(20,20,40,20,20);
ctx.stroke();
</script>

運行效果如圖2-9所示。

image

2.1.5　擦除Canvas畫板
擦除Canvas畫板上的內容需要用到clearRect函數，此函數可以擦除一個矩形區域。它需要4個參數：起點的坐標x和坐標y，擦除區域的長和寬。其用法如代碼清單2-10所示。
代碼清單　2-10

<canvas id="myCanvas" width="200" height="100">
你的瀏覽器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.fillRect(10,10,200,100);
ctx.clearRect(30,30,50,50);
</script>

上面的代碼先繪制了一個紅色的實心矩形，然后在紅色矩形中間擦除了一個50×50的小矩形，效果如圖2-10所示。

image

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/455514.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/455514.shtml
英文地址，請注明出處：http://en.pswp.cn/news/455514.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

如何查看Ubuntu版本

如何查看Ubuntu版本

有時候需要查看一下系統安裝的Ubuntu的版本&#xff0c;最簡單的方式是輸入lsb_release -a。whatis lsb_release輸出&#xff1a;print distribution-specific information。所以lsb_release這個命令就是用來輸出發行版的信息的。 Open the Terminal enter:lsb_release -a It w…
閱讀更多...
linux下.a/.so/.la目標庫區別

linux下.a/.so/.la目標庫區別

在linux平臺上編譯時&#xff0c;常會遇到目標庫的疑問&#xff0c;有靜態庫也有動態庫&#xff0c;單個理解都不太難&#xff0c;但是對復雜的工程而言&#xff0c;一旦混合到一起去&#xff0c;對整個工程的理解和調用&#xff0c;將會造成很大困擾&#xff0c;本文就匯總這幾…
閱讀更多...
python 二元函數繪制_Python繪制二元函數曲面

python 二元函數繪制_Python繪制二元函數曲面

微實踐&#xff1a;繪制二元函數曲面我們將演示如何借助于ufunc的廣播運算計算下述二元函數的在一個xy平面上的值并將其繪制成3D曲面。其中&#xff0c;x和y的取值范圍均為[-2,2]。為了達到目的&#xff0c;我們需要一個二維的結果數組z&#xff0c;其元素的下標對應參數x,y的取…
閱讀更多...
Npgsql使用入門(三)【批量導入數據】

Npgsql使用入門(三)【批量導入數據】

Program.cs代碼: class Program{static void Main(string[] args){var test new PgBulkCopyHelper<SingleBuilding>("bld_amap_gzmain");foreach (string pName in test.PropNames){Console.WriteLine("name: {0},\t\ttype: {1}", pName, test.Prop…
閱讀更多...
遠程網絡視頻監視技術

遠程網絡視頻監視技術

目前要實現廣域網視頻監視&#xff0c;主要通過三種方式實現&#xff1a;1.硬盤錄像機&#xff1b;2.網絡視頻服務器&#xff1b;3.網絡攝像機。 硬盤錄像機是一個以錄像為主的設備&#xff0c;有的可以支持IE瀏覽。網絡視頻服務器一般前端不錄像&#xff0c;直接將影像傳輸到…
閱讀更多...
Deepin下java開發環境部署

Deepin下java開發環境部署

簡介 本經驗由深度論壇用戶(zhang12345shun)分享&#xff0c;原文地址 正文 SUN JDK&#xff08;現已改名Oracle JDK&#xff09; 1.下載Sun版JDK壓縮包&#xff08;.tar.gz&#xff09;&#xff0c;選擇其中的32/64位Linux版本。 2.將其解壓縮&#xff1a; sudo tar -zx…
閱讀更多...
判斷ic卡類型

判斷ic卡類型

傳15讀卡片數據 判斷data8的status是否為0&#xff0c;是則是ic 否則就是磁條卡 根據二磁道數據識別是IC卡還是磁條卡 根據二磁道符號后面第一位識別。規則是 該數字 6 或者 2 則該卡是IC卡&#xff0c;否則是普通磁條卡 轉載于:https://www.cnblogs.com/wubenhui/p/6956256.h…
閱讀更多...
python常用代碼_Python常用算法學習(3)（原理+代碼）——最全總結

python常用代碼_Python常用算法學習(3)（原理+代碼）——最全總結

1&#xff0c;什么是算法的時間和空間復雜度算法(Algorithm)是指用來操作數據&#xff0c;解決程序問題的一組方法&#xff0c;對于同一個問題&#xff0c;使用不同的算法&#xff0c;也許最終得到的結果是一樣的&#xff0c;但是在過程中消耗的資源和時間卻會有很大的區別。那…
閱讀更多...
數據監測驅動下的信息流廣告優化

數據監測驅動下的信息流廣告優化

信息流廣告是什么 “今日頭條和百度必有一戰”&#xff0c;相信不少的互聯網人在過去幾個月都聽到過類似的斷言。定位于信息分發平臺的今日頭條和主營搜索業務的百度會產生如此大的利益沖突&#xff0c;最核心的點其實就是信息流廣告。 信息流廣告指的是在用戶使用互聯網產品或…
閱讀更多...
在idea中使用git管理你的項目

在idea中使用git管理你的項目

起步 idea是十分智能的Java集成開發環境 而我們在用idea寫項目的時候經常遇到版本控制的問題,而git工具如果你只會在終端中的git命令來進行控制,可能會使得效率低下 今天小編就教大家在idea中使用git來管理你的項目 首先創建一個項目 點擊create new projects 這里選擇默認…
閱讀更多...
react-native熱更新插件react-native-code-push

react-native熱更新插件react-native-code-push

使用react-native-code-push插件來實現熱更新的時候&#xff0c;會遇到一些問題。下面這個問題就讓我差點崩潰了。 在測試 Production 和 Staging 是否會去檢查各自環境下的bundle文件&#xff0c;我就遇到了混亂的問題。 有時候用 Release 打包出來的app會去檢查 Staging 下的…
閱讀更多...
《工業控制網絡安全技術與實踐》一一第3章 工業控制網絡安全威脅

《工業控制網絡安全技術與實踐》一一第3章 工業控制網絡安全威脅

第3章 工業控制網絡安全威脅 第2章介紹了工業控制系統的相關知識。本章主要介紹工業控制網絡的基本知識&#xff0c;并詳細介紹工業控制網絡的常見安全威脅。之后&#xff0c;分析工業控制系統的脆弱性。
閱讀更多...
多媒體視頻知識入門貼zt（二）

多媒體視頻知識入門貼zt（二）

2.2 音視頻基本概念介紹 2.2.1 視頻的基本概念 RGB和YUV RGB指的是紅綠藍&#xff0c;應用還是很廣泛的&#xff0c;比如顯示器顯示&#xff0c;BMP文件格式中的像素值等&#xff1b;而YUV主要指亮度和兩個色差信號&#xff0c;被稱為luminance和chrominance他們的轉化關系可以…
閱讀更多...
Java筆記01-數組相關

Java筆記01-數組相關

數組相關 數組的創建 數據類型[] 數組名稱 new 數據類型[數組的長度]其中數據類型可以為任意類型 數組的訪問 ? 調用數組的length屬性可以獲取數組的長度&#xff1a; int len arr.length;? 可以通過下標的方式訪問數組中的每一個元素。 需要注意的是&#xff1a;數組…
閱讀更多...
偏好設置

偏好設置

轉載于:https://www.cnblogs.com/xufengyuan/p/6959424.html
閱讀更多...
keyshot環境素材文件_快速學會keyshot基礎渲染的步驟

keyshot環境素材文件_快速學會keyshot基礎渲染的步驟

KeyShot是基于CPU為三維數據進行渲染和動畫操作的獨立渲染器。意為“The Key to Amazing Shots”&#xff0c;是一個互動性的光線追蹤與全域光渲染程序&#xff0c;無需復雜的設定即可產生相片般真實的 3D 渲染影像。KeyShot超強的渲染能力廣泛的應用于工業產品、機械工程、CG行…
閱讀更多...
傳統數據中心如何實現向云的平滑升級

傳統數據中心如何實現向云的平滑升級

1.引言 眾所周知&#xff0c;云計算是近年來發展最快的互聯網技術&#xff0c;被稱為第四次IT革命。據權威機構預測&#xff0c;到2016年&#xff0c;2/3的IT應用服務將建立在云架構上 [1]。作為云計算核心的基礎承載設施&#xff0c;數據中心在網絡中所扮演的角色也愈加重要。…
閱讀更多...
UGUI滾動列表ScrollView使用注意點

UGUI滾動列表ScrollView使用注意點

ScrollView的Viewport不能引用其子節點Grid&#xff0c;不然會導致ScrollView滾到頭時還能繼續滾動&#xff0c;無法回滾 轉載于:https://www.cnblogs.com/lovesharing/p/6963062.html
閱讀更多...
Java筆記02-OOP

Java筆記02-OOP

面向對象編程 萬物皆對象 面向對象指以屬性和行為的觀點去分析現實生活中的事物 面向對象編程指先以面向對象的思想進行分析,然后使用面向對象的編程語言進行表達的過程 面向對象編程是軟件產業化發展的需求 理解面向對象的思想精髓才行 面想對象的三大特性 封裝 繼承 …
閱讀更多...
上位機與基恩士plc以太網通訊_2020湛江AB羅克韋爾PLC主機回收二手或全新

上位機與基恩士plc以太網通訊_2020湛江AB羅克韋爾PLC主機回收二手或全新

2020湛江AB羅克韋爾PLC主機回收二手或全新專業回收基恩士光電傳感器回收&#xff0c;基恩士安全光柵回收&#xff0c;基恩士對射開關回收&#xff0c;基恩士工控配件回收&#xff0c;基恩士視覺相機回收&#xff0c;發那科伺服驅動電機回收&#xff0c;發那科控制系統回收&…
閱讀更多...
最新文章

Copyright @ 2022~2023