[實驗]在同一個 canvas 元素中繪製不同顏色的圖形

阿新 • • 發佈：2019-01-17

實驗背景：

在做一個 HTML 5 的一個遊戲專案的時候，想在同一個 canvas 元素中繪製多個具有不同顏色的圖畫，但是由於當時對 HTML 5 canvas 元素不是很熟悉，結果總是所有圖畫都具有一樣的顏色。去網上查詢，也沒有找到這個問題的答案，於是只能自己研究了。

實驗說明：

該專案本是移動平臺的跨平臺專案，可以跑在WP7，WP8，Andriod，iOS，黑莓等平臺，但由於 HTML 5 本身具有較好的跨平臺性，所以在保證平臺相容性沒有問題的

情況下，本次測試在PC上進行。

實驗目的：

在同一個 canvas 元素中繪製多個不同顏色的圖畫

實驗材料：

語言：HTML5，javascript

開發工具：VS 2012

測試工具：IE 10

實驗過程：

首先建立一個 HTML 5 的基本頁面，並新增一個 canvas 元素，id 為 myCanvas，然後新增 JS 程式碼，繪製四個小圓圈

程式碼如下：

<!DOCYTPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>在同一個 canvas 元素中繪製不同顏色的圖畫</title>
        <script>
            function start()
            {
                var c = document.getElementById("myCanvas")
                var cxt = c.getContext("2d")

                cxt.fillStyle = "#FF00FF"
                cxt.arc(100, 100, 50, 0, Math.PI * 2, true)
                cxt.fill() 

                cxt.fillStyle = "#FF0000"
                cxt.arc(200, 200, 50, 0, Math.PI * 2, true)
                cxt.fill()

                cxt.fillStyle = "#FFFF00"
                cxt.arc(300, 300, 50, 0, Math.PI * 2, true)
                cxt.fill()

                cxt.fillStyle = "#000000"
                cxt.arc(400, 400, 50, 0, Math.PI * 2, true)
                cxt.fill()
            }
        </script>
    </head>
    <body onload="start()">
        <canvas id="myCanvas" height="1000" width="1000">
            你的瀏覽器不支援 HTML 5
        </canvas>
    </body>
</html>

效果如圖：

程式碼說明：

本想為四個圓填充不同顏色，但最終結果是四個圓全部是黑色，即第四個圓的顏色，難道一個 canvas 中只能有一種

fillStyle 嗎？如果只有一種顏色，豈不是太單一？於是我又進行了多次測試。

經過測試，最終找到了一個解決方案。

canvas 繪製可以通過 JS 程式碼來控制（其實應該說 HTML 5 只是提供了個容器，繪製只能在 JS 裡完成），而 JS 提

供了兩個函式，beginPath() 和 closePath() ，這兩

個函式可以起到類似 <div> 的作用，用它來把每個圓圈包圍，就可以繪製不同顏色的圖形了。

程式碼如下：

<!DOCYTPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>在同一個 canvas 元素中繪製不同顏色的圖畫</title>
        <script>
            function start()
            {
                var c = document.getElementById("myCanvas")
                var cxt = c.getContext("2d")

                cxt.beginPath() //注意此處
                cxt.fillStyle = "#FF00FF"
                cxt.arc(100, 100, 50, 0, Math.PI * 2, true)
                cxt.fill()
                cxt.closePath() //注意此處

                cxt.beginPath() //注意此處
                cxt.fillStyle = "#FF0000"
                cxt.arc(200, 200, 50, 0, Math.PI * 2, true)
                cxt.fill()
                cxt.closePath() //注意此處

                cxt.beginPath() //注意此處
                cxt.fillStyle = "#FFFF00"
                cxt.arc(300, 300, 50, 0, Math.PI * 2, true)
                cxt.fill()
                cxt.closePath() //注意此處

                cxt.beginPath() //注意此處
                cxt.fillStyle = "#000000"
                cxt.arc(400, 400, 50, 0, Math.PI * 2, true)
                cxt.fill()
                cxt.closePath() //注意此處
            }
        </script>
    </head>
    <body onload="start()">
        <canvas id="myCanvas" height="1000" width="1000">
            你的瀏覽器不支援 HTML 5
        </canvas>
    </body>
</html>

效果如圖：

請讀者們注意，兩個函式有所屬的物件，此事例中為 cxt 。

另外，在測試中，筆者還發現，當去掉所有的 closePath() 時，只保留 beginPath() ，一樣可以達到目的，也就是

說，當遇到beginPath() 時，會自動重新開始下一個圖形

的繪製（保留 closePath() ，去掉 beginPath() 時，效果相當於不新增這兩個函式）。但是筆者個人認為，最好兩個

函式都新增，這樣會提高程式碼可讀性，使程式碼更規

範。

實驗結果：

成功在同一個 canvas 元素中繪製出不同顏色的多個圖形，並且還對 beginPath() 和 closePath() 的用法有了意外收穫。

實驗總結：HMTL 5 的 canvas 是一大亮點，可以繪製出精美的圖形（本文只是對某種用法的討論，真正的 canvas

的功能要比此例強大的多），但對在實驗中意外收穫

的beginPath() 和closePath() 函式的用法，以及由此聯想出的 canvas 繪製圖形的機制，筆者還很不清楚，會在以後

找時間繼續研究。

最後，歡迎大家積極討論，糾正筆者的錯誤，提出寶貴意見，補充完善筆者的觀點，謝謝！

Rember！You make luck！

注：

本文為原創成果，轉載請註明出處，謝謝！

分享到：

[實驗]在同一個 canvas 元素中繪製不同顏色的圖形

實驗背景：在做一個 HTML 5 的一個遊戲專案的時候，想在同一個 canvas 元素中繪製多個具有不同顏色的圖畫，但是由於當時對 HTML 5 canvas 元素不是很熟悉，結果總是所有圖畫都具有一樣的顏色。去網上查詢，也沒有找到這個問題的答案，於是只能自己研究了。

一個在h5的canvas元素中畫撲克牌jquery插件實現

code isp arguments close tca func spa font blog 1 //非架構 2 ; (function ($) { 3 var aspect = 5.7 / 8.8;//撲克寬和高比例 4 function Paint

Matlab：繪製不同顏色的柱狀圖bar

1、當有多個圖片的時候需要用figure函式來分別顯示： figure(1) imshow(img_test); figure(2) bar(n,m) 2、對bar進行不同顏色的繪製： %bar顏色資料 color_set=[data1 data2 data3]

webgl第七課-滑鼠分象限繪製不同顏色的點

需要原始碼可以Q群：828202939 或者點選這裡希望可以和大家一起學習、一起進步！！純手打！！書籍是PDF電子檔，也在Q群裡，所有的課程原始碼在我上傳的資源裡面，本來想設定開源，好像不行！如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下

#Qt入門#---------label中顯示不同顏色的字元

因為除錯需要，現在要用不同顏色高亮，方便觀察資料。具體方法是這樣的： label->setText( QObject::tr

UILabel設定多種字型、顏色（文字中字型不同顏色）

NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"Using NSAttributed String，try your best to test a

html5 canvas元素字型繪製

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

如何在一個TextView中顯示不同顏色的文字

在唯品會app中，我們可以看到它裡面有些文字控制元件能夠顯示不同顏色的文字，這種效果看起來蠻不錯的。先上個效果圖：其實，在這上面使用的是一個TextView控制元件來顯示這段文字的。而文字內容是使用html的格式實現的，程式碼如下： text.setText(Html.

Matlab一個視窗中繪製多個圖形

subplot指令將影象視窗分成若干個區域,在每個區域內分別繪圖. handle = subplot(m, n, p); 上述指令將影象劃分為 m*n 個子區域, p用於指向子區域. 順序為 1 2 3 … n n+1 n+2 n+3 2n ……………………………………..

mysql統計同一個表中的不同條件下的個數

方法解決 select where 一個 mysq tro 嘗試 student 想要同時統計男生數量和不及格數量。SELECT COUNT(1) AS boyNum FROM t_student WHERE sex=‘男‘; SELECT COUNT(1) AS poo

C#在PDF中如何以不同顏色高亮文本

.net c# pdf 文本高亮高亮的文本有助於閱讀者快速有效地獲取文章關鍵信息。在PDF文件中，對文章的不同文本，關鍵詞、句等進行不同顏色的文本高亮操作，可以使閱讀者在閱讀過程中有效地區分不同高亮顏色文本的意義。在下面的示例中，我使用Free Spire.PDF for .NET來進行操作

android 中通過不同的條件，改變listview中字型顏色及背景色

結果圖：通過介面卡進行操作： public class SystemAdapter extends BaseAdapter { private ArrayList<SjClass> sData; private Context sContext;

android實現一段文字中不同顏色

相信大多程式設計師都會遇到UI給的效果圖中，一段文字，卻用不同的顏色顯示關鍵字以突出重點。我們平常用到都是使用TextView設定textColor就可以了，如何設定多種顏色呢，有兩種方法：使用HTML 、strings.xml 輔助完成在strings.xml檔案中新增 #6a6

HTML5 Canvas中繪製橢圓的幾種方法

1.canvas自帶的繪製橢圓的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是後來新增的，引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)

從一個數組中抽取不同的元素

public function j() { $user = array(1,1,2,1,1,1,1,1,9); $draw_user = []; $num = 3; for ($i=0; $i < $num; $i++) { $user_key = array_ran

canvas元素繪製太極圖

<!DOCTYPE html><html><head> <title>canvas example</title> <meta charset="utf-8"></head><body><canva

為同一個元素繫結不同的事件指向同一個事件的處理函式

<input type="button" value="點選" id="btn"/><script src="commer.js"></script><script> //為同一個元素繫結不同的事件指向同一個事件的處理函式 ver("btn").on

Canvas中繪製貝塞爾曲線

① 什麼是貝塞爾曲線？在數學的數值分析領域中，貝濟埃曲線（英語：Bézier curve，亦作“貝塞爾”）是計算機圖形學中相當重要的引數曲線。更高維度的廣泛化貝濟埃曲線就稱作貝濟埃曲面，其中貝濟埃三角是一種特殊的例項。貝濟埃曲線於1962年，由

android 中使用TextView實現分段顯示不同顏色的字串

一、最容易想到的是使用多個TextView，設定其android:textColor="#000000" 二、使用HTML標籤 String content="我要顯示<font color='#FF0000'>紅色</font>"; TextVi

canvas中繪製文字

canvas提供兩種文字渲染方式： fillText(text,x,y[,maxWidth]); // 在指定的（x,y）處填充文字，繪製的最大寬度是可選的 strokeText(text,x,y[,m

[實驗]在同一個 canvas 元素中繪製不同顏色的圖形

相關推薦