DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 跟KingDZ學HTML5之五:Canvas之圖像與文字
跟KingDZ學HTML5之五:Canvas之圖像與文字
編輯:HTML5詳解     

大家好,這節課咱們繼續講解 canvas 這個標簽的一些常見的使用,呵呵,這個標簽還是真的挺有用途的。

這節課程首先說明的是 如何才 canvas 中插入圖像。

canvas 插入圖像的步驟:呵呵,又來了。

1.首先當然准備一張圖片了。

2.用 drawImage 方法將圖像插入到 canvas 中。

drawImage 方法 有三種形態的參數可以選擇

第一種:

我們先用最簡單的方法寫一個例子

drawImage(image, x, y)   

其中 image 是 image 或者 canvas 對象,x 和 y 是其在目標 canvas 裡的起始坐標

下面我們寫一個例子說明一下。大家看一下就清楚了。

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.         var c = document.getElementById("mycanvas");  
  3.         var cxt = c.getContext("2d");  
  4.         var img = new Image();  
  5.         img.onload = function () {  
  6.             cxt.drawImage(img, 0, 0);  
  7.         }  
  8.         img.src = "2.png";  
  9.     }  

好了,看一下效果吧。

1

第二種:

drawImage(image, x, y, width, height)

參數就不用說的太清除了吧,圖像的高和寬,呵呵。

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.     var c = document.getElementById("mycanvas");  
  3.     var cxt = c.getContext("2d");  
  4.     var img = new Image();  
  5.     img.onload = function () {  
  6.         //cxt.drawImage(img,0,0);  
  7.         for (i = 0; i < 4; i++) {  
  8.             for (j = 0; j < 4; j++) {  
  9.                 cxt.drawImage(img, j * 50, i * 50, 50, 50);  
  10.             }  
  11.         }  
  12.     }  
  13.     img.src = "2.png";  
  14. }  

1

第三種:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

最復雜drawImage 雜使用方法,包含上述5個參數外,

另外4個參數設置源圖像中的位置和高度寬度。這些參數允許你在顯示圖像前動態裁剪源圖像。

這回為了看到效果,我們采用這張圖片,我們想辦法只要  她的腦袋 

11442931c-1[1]

好了,開始裁剪,其實就是一些數字的問題【我上面的這張美女是 200*200】

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.         var c = document.getElementById("mycanvas");  
  3.         var cxt = c.getContext("2d");  
  4.         var img = new Image();  
  5.         img.onload = function () {  
  6.             cxt.drawImage(img, 80, 0, 100, 100, 50, 50, 100, 100);  
  7.         }  
  8.         img.src = "1.jpg";  
  9.     }  

 

1

看到了嗎?只剩下一個腦袋了。

下面我們開始 這節課的第二個內容----------文字

有兩個方法可以繪制文字:

fillText 和 strokeText。

第一個繪制帶 fillStyle 填充的文字,後者繪制只有 strokeStyle 邊框的文字。

兩者的參數相同:要繪制的文字和文字的位置(x,y) 坐標。還有一個可選選項——最大寬度。如果需要的話,浏覽器會縮減文字以讓它適應指定寬度。

這個大家看想不想,繪制矩形的 那個 東東

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.         var c = document.getElementById("mycanvas");  
  3.         var cxt = c.getContext("2d");  
  4.         cxt.fillStyle = "#0f0";  
  5.         cxt.font = "bold 20px Arial";  
  6.         cxt.textBaseline = "top";  
  7.         cxt.fillText("KingDZ原創", 50, 50);  
  8.         //換種方式  
  9.         cxt.font = "italic 20px 微軟雅黑";  
  10.         cxt.strokeText("KingDZ原創", 50, 100);  
  11.     }  

效果圖如下。

1

 

好了,圖像和文字簡單的入門就到這了,好文要頂啊!!!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved