Html5 Cavans之高階內容上篇

2021-07-11 05:58:49 字數 2946 閱讀 1245

關於陰影的設定有:

1~context.shadowcolor:陰影的顏色一般為gray,比較貼近現實

2~context.shadowoffsetx:水平偏移

3~context.shadowoffsety:垂直偏移

4~context.shadowblur:陰影的模糊級數任意數值,自己調合適的效果

示例**如下:

結果如下:

下面提出乙個問題問題,下圖樹的陰影是怎麼畫的?

剛剛講的陰影的繪製好像畫不了這個啊?因為它是把原來的影象平移,那麼久有點不真實了,怎麼辦?

首先要先明白畫陰影的本質,然後自己可以定義「自己的陰影」啊。

陰影的實現本質就是平移原來的圖形再加上顏色的修飾,那麼還有一種方法來實現陰影的效果那就是把圖形再繪製一遍然後自己做位置的和顏色的修飾。

上面的樹是利用transform(a,b,c,d,e,f)來畫的,自己思考,transform(a,b,c,d,e,f)方面不懂可以參考:

globalalpha是全域性透明度設定(預設值為1:沒有透明效果)

演示**如下:

function draw(composite)
結果如圖:

globalcompositeoperation全域性組合操作,它可以很方便畫出一些想要的影象

如圖:

值 描述

source-over 預設。在目標影象上顯示源影象。

source-atop 在目標影象頂部顯示源影象。源影象位於目標影象之外的部分是不可見的。

source-in 在目標影象中顯示源影象。只有目標影象內的源影象部分會顯示,目標影象是透明的。

source-out 在目標影象之外顯示源影象。只會顯示目標影象之外源影象部分,目標影象是透明的。

destination-over 在源影象上方顯示目標影象。

destination-atop 在源影象頂部顯示目標影象。源影象之外的目標影象部分不會被顯示。

destination-in 在源影象中顯示目標影象。只有源影象內的目標影象部分會被顯示,源影象是透明的。

destination-out 在源影象外顯示目標影象。只有源影象外的目標影象部分會被顯示,源影象是透明的。

lighter 顯示源影象 + 目標影象。

copy 顯示源影象。忽略目標影象。

source-over 使用異或操作對源影象與目標影象進行組合。

注意它的放置位置~放在原來被遮擋圖形之後,後面圖形之前。具體自己實驗看

平時我們畫的圖形都是規規矩矩的,那麼如果我們用線條畫了個抽象派作品,就像下面這圖一樣,童鞋們知道怎麼用fill()染色呢?

這裡就要用到數學上的乙個方法——非零環繞原則,來判斷哪塊區域是裡面,哪塊區域是外面(在裡面的不填色在外面的填色)。接下來,我們具體來看下什麼是非零環繞原則。

首先,我們得給圖形確定一條路徑,只要「一筆畫」並且「不走重複路線」就可以了。如圖,標出的是其中的一種路徑方向。我們先假定路徑的正方向為1(其實為-1啥的也都可以,正負方向互為相反數,不是0就行),那麼反方向就是其相反數-1。

然後,我們在子路徑切割的幾塊區域內的任意一點各取一條方向任意的射線,這裡我只取了三個區域的射線為例,來判斷這三塊區域是「裡面」還是「外面」。

接下來,我們就來判斷了。s1中引出的射線l1,與s1的子路徑的正方向相交,那麼我們就給計數器+1,結果為+1,在外面。

s2中引出的射線l2,與兩條子路徑的正方向相交,計數器+2,結果為+2,在外面。

s3中引出的射線l3,與兩條子路徑相交,但是其中有一條的反方向,計數器+1-1,結果為0,在裡面。沒錯,只要結果不為0,該射線所在的區域就在外面。

這說明了路徑方向對填色的重要性。

示例**如下:

結果如下:

ispointinpath() 方法返回 true,如果指定的點位於當前路徑中;否則返回 false。

示例**如下

var c=document.getelementbyid("mycanvas");

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

ctx.rect(20,20,150,100);

if (ctx.ispointinpath(20,50))

;

可以用於動態繪製影象,也可以實現互動,點可以是你滑鼠所點。

html5行內元素 html5

html5是web中核心語言html的規範,使用者使用任何手段進行網頁瀏覽時看到的內容原本都是html格式的,在瀏覽器中通過一些技術處理將其轉換成為了可識別的資訊。小標題 html 1.塊級元素 獨佔一行,可設定寬高 可以巢狀 劃分區域的容器 語段標籤 編輯器常用 2.行內元素 都在一行內顯示,不能...

HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料,訪問方便,不影響 效能。他們的用法相同,儲存時間不同。localstorage 的資料儲存在本地硬體上,可以永久儲存,可以手動呼叫api清除資料。se...

HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料,訪問方便,不影響 效能。他們的用法相同,儲存時間不同。localstorage 的資料儲存在本地硬體上,可以永久儲存,可以手動呼叫api清除資料。se...