大家好,這節課咱們繼續講解 canvas 這個標簽的一些常見的使用,呵呵,這個標簽還是真的挺有用途的。
這節課程首先說明的是 如何才 canvas 中插入圖像。
canvas 插入圖像的步驟:呵呵,又來了。
1.首先當然准備一張圖片了。
2.用 drawImage 方法將圖像插入到 canvas 中。
drawImage 方法 有三種形態的參數可以選擇
第一種:
我們先用最簡單的方法寫一個例子
drawImage(image, x, y)
其中 image 是 image 或者 canvas 對象,x 和 y 是其在目標 canvas 裡的起始坐標
下面我們寫一個例子說明一下。大家看一下就清楚了。
JavaScript Code復制內容到剪貼板好了,看一下效果吧。
第二種:
drawImage(image, x, y, width, height)
參數就不用說的太清除了吧,圖像的高和寬,呵呵。
JavaScript Code復制內容到剪貼板第三種:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
最復雜drawImage 雜使用方法,包含上述5個參數外,
另外4個參數設置源圖像中的位置和高度寬度。這些參數允許你在顯示圖像前動態裁剪源圖像。
這回為了看到效果,我們采用這張圖片,我們想辦法只要 她的腦袋
好了,開始裁剪,其實就是一些數字的問題【我上面的這張美女是 200*200】
JavaScript Code復制內容到剪貼板
看到了嗎?只剩下一個腦袋了。
下面我們開始 這節課的第二個內容----------文字
有兩個方法可以繪制文字:
fillText 和 strokeText。
第一個繪制帶 fillStyle 填充的文字,後者繪制只有 strokeStyle 邊框的文字。
兩者的參數相同:要繪制的文字和文字的位置(x,y) 坐標。還有一個可選選項——最大寬度。如果需要的話,浏覽器會縮減文字以讓它適應指定寬度。
這個大家看想不想,繪制矩形的 那個 東東
JavaScript Code復制內容到剪貼板效果圖如下。
好了,圖像和文字簡單的入門就到這了,好文要頂啊!!!