1. 程式人生 > >canvas學習心得之路徑

canvas學習心得之路徑

      剛開始接觸canvas的路徑時,有些迷糊。

      由於我們正常生活的繪畫邏輯,或者由於java的GUI程式設計的影響,我們總是以為繪畫就是有紙有筆,直接畫出圖形就可以了。

      這紙筆也就是程式設計環境,這是必不可少的,一般來說,我們就可以直接繪圖了,但在canvas的繪圖中,雖然也能直接繪製一些圖,但是更多的圖是通過路徑來繪製的。剛開始接觸的時候,有好幾次都是設定好路徑,執行程式,結果介面空白一片,就是沒有圖出來。經過一些研究,終於對路徑有了一點體會。

      原來canvas中的路徑,就是設定好圖畫的形狀,但並沒有顯示出來。舉個例子,在電視劇中我們經常看到一些人得到了一張藏寶圖,但是圖上什麼東西都看不到。其實上面是有圖的,只不過是被隱藏起來的,只要滴點血或滴點墨水等等就能讓圖顯示出來,這隱藏的圖就相當於路徑,而在canvas中要使路徑顯示出來,則要用到fill()和stroke()這兩個方法,其中,stroke是把圖勾勒出來,fill則是把圖填充出來。

      另外,我們再來說說關於路徑的另外兩個重要的方法,beginPath()和closePath(),beginPath是用來重置路徑的,如果沒用這個方法會發生什麼事呢,比如說,我們先畫一條直線,沒用這個方法,就又畫一個圓,那麼圖上就會有兩條直線一個圓(其中一條直線覆蓋在另一條直線上,因為他們的路徑時一樣的),如兩次繪畫採用的顏色不一樣,那我們就看不到第一次畫的那條直線了。之所以發生這樣的事,是因為我們畫完直線的時候,它的路徑還是存在的,這時我們再建立一個圓的路徑,畫布上就有一條直線一個圓的路徑,之前的路徑並沒有被清除掉,而解決這種情況就要用到我們的beginPath();這個方法是用來重置路徑的,也可以理解為,是用來清除之前的那些路徑的,之後我們再設定路徑,畫布上就只有新建立的路徑了,而closePath(),很多人一看,誒,關閉路徑,那我關了之前的路徑,是不是不用再beginPath()也可以呢,其實呢,這個也坑過我,顧名思義有時真的害人,這個closePath()更準確的說,應該是封閉路徑,比如說,你畫了一個半圓,沒用closePath的話,圖上就只有一條弧線,而用了closePath呢,圖上就有一條弧線加一條直線,這條直線連線弧線的兩個端點,把這個半圓封閉起來。總的來說,closePath就是用來連線路徑的最終點與起點的。

      一般來說,beginPath和closePath是成對出現的,我們也可以只用beginPath而不用closePath,但是不可以只用closePath而不用beginPath,也就是說,closePath出現的次數應該少於等於beginPath出現的次數。

相關推薦

canvas學習心得路徑

      剛開始接觸canvas的路徑時,有些迷糊。       由於我們正常生活的繪畫邏輯,或者由於java的GUI程式設計的影響,我們總是以為繪畫就是有紙有筆,直接畫出圖形就可以了。       這紙筆也就是程式設計環境,這是必不可少的,一般來說,我們就可以直接繪圖

學習心得Zblog選擇數據庫版本及Sql server2012數據庫自增量跳躍1000問題

Sql server2012 數據庫 ZBLOG 博客 學習心得讀書筆記:今天我學習的是關於ZBLOGASP2.2版本程序搭載數據庫的事項,因為最近幾年一直在寫博客,因此對於這套系統的的早期版本還是比較熟悉的,但是對於新版本和新數據庫就沒怎麽了解了。尤其是搭載MS-SQL數據庫或者PHP程序配

JEPLUS學習心得請假單功能的完成——JEPLUS軟件快速開發平臺

樣式 設置 itl 明顯 但是 load round 有用 p s JEPF軟件快

學習心得如何在前端界面操作數據表

查詢 dap rom osi 前端 src console 但是 text 如何在前端界面操作數據表 CurrentCell 屬性: 取得或者修改當前單元格的內容 Console.WriteLine(DataGridView1.CurrentCell.Value);//

學習心得輸入輸出控制元件

學習筆記之C#輸入輸出控制元件 思維導圖: 1. Textbox  直接在框框中使用可用來輸入輸出 2. DataTimePicker CustomFormat屬性:可以用來控制控制元件值顯示的日期格式。在設定這個屬性之前,需要將Format屬性設定為Custom,表示使用自定義的格式。

小程式學習心得資料繫結技巧

1 在template中可以通過物件的賦值形式來對template中的data傳值 <template is="starsTemplate" data="{{stars:stars, score: average}}" /> 2 …的運用

Spring IOC學習心得Bean對IOC容器的感知

容器管理的Bean一般不需要了解容器的狀態和直接使用Bean,但是在某些情況下,是需要在Bean中直接對IOC容器進行操作的,這時候,就需要在Bean中設定對容器的感知。Spring IOC也提供了該功能,它是通過特定的aware介面來完成的。aware介面有如下這些: B

Openlayers3學習心得LineString

前言關於LineString,官方的示例給的是滑鼠畫點,自動連線,並新增箭頭(LineString Arrows示例),而在我們實際應用中,往往需要手動錄入標記點,然後進行連線並新增箭頭,下面就分享我使用LineString的過程:1. 首先是靜態資料的:- 先準備一個sou

Java學習心得面向物件(二)

 引用型別和基本型別有著巨大的區別,當宣告一個int  i=0時,系統會馬上給這個i分配一個記憶體空間(在棧記憶體裡面分配一小塊區域用來裝數字0),裡面裝著一個值為0,以後使用i這個名字馬上就可以訪問這個記憶體空間裡面的值,這就是基本資料型別,所以基礎型別就只佔一塊記憶體。基礎型別之外的型別全都叫引用型別,

Java學習心得面向物件(一)

一、面向過程的思想和麵向物件的思想  面向物件和麵向過程的思想有著本質上的區別, 作為面向物件的思維來說,當你拿到一個問題時,你分析這個問題不再是第一步先做什麼,第二步再做什麼,這是面向過程的思維,你應該分析這個問題裡面有哪些類和物件,這是第一點,然後再分析這些類和物件應

JavaWeb學習心得開發環境搭建(Tomcat伺服器)

疑問:學習web開發,為什麼必須要先裝一個WEB伺服器?   在本地計算機上隨便建立一個web頁面,使用者是無法訪問到的,但是如果啟動tomcat伺服器,把web頁面放在tomcat伺服器中,使用者就

js學習心得js的自定義事件-基於觀察者模式的實現

GOF對觀察者模式的定義:Observer的意圖是定義物件之間的一種一(被觀察者)對多(觀察者)的關係,當一個物件的狀態發生改變時,所有依賴它的物件得到通知,並且會自動更新自己。 從這段經典的定義中,可以推測下,觀察者模式中的倆個物件各自應該擁有的特徵 1,被觀察者應該可以

JavaWeb學習心得自定義簡單標籤(一)

一、簡單標籤簡介 含義:實現SimpleTag介面的標籤稱為簡單標籤。 方法: setJspContext:用於把JSP頁面的pageContext物件傳遞給標籤處理器物件setParent:用於把

Java學習心得異常處理

import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; public class TestException { /** * 任何方法往外拋

canvas學習canvas的基本使用

一、canvas 1.canvas是html5中的一個標籤,通過canvas的getContext得到上下文可以繪圖等操作。canvas通過js進行API操作,可以得到想要的圖形或動畫。 2.html5中canvas有兩套尺寸,第一個是元素本身的大小,在標籤

angularjs2學習心得使用第三方JS庫

使用angularjs2的時候,我們難免會用到第三方的js庫,而和其他框架不一樣的是,angular是通過typings,類似於maven倉庫一樣,我的理解是這樣,地址是:http://microso

Canvas學習系列標籤

HTML 5 <canvas> 標籤 定義圖形,比如圖表和其他影象 只是影象容器,需要配合指令碼來繪製圖形 1、屬性: height:設定canvas的高度 width:設定canvas的寬度 2、歷史:   由Safari1.3 Web瀏覽器引入

Canvas學習筆記畫圓(笑臉)

window.addEventListener('load', () => { var btn = document.getElementById('btn-smile'); var c = document.getElementById('myCanvas')

canvas學習筆記2d畫布基礎的實現

text2 posit face pan adding color 垂直 edas 畫圖 一. Canvas是啥 < canvas > 是一個可以使用腳本(通常是js)來繪圖的HTML元素 < canvas > 最早由Apple引入WebKit,

(二)jdk8學習心得Lambda表達式

就是 變量作用域 接口 lambda表達式 final src alt 方法體 bsp 二、Lambda表達式 1、 格式 (參數1,參數2,…,參數n)->{方法體} 註意: (參數1,參數2,...,參數n)要與方法接口中的參數一致,但是名字