font 設置繪制文字所使用的字體，例如20px 宋體，默認值為10px sans-serif。該屬性的用法與css font屬性一致，例如italic bold 14px/30px Arial,宋體 fillStyle 用于設置畫筆填充路徑內(nèi)部的顏色、漸變和模式。該屬性的值可以是一個表示CSS顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象 strokeStyle 用于設置畫筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個表示CSS顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象 fillText(string text, int x, int y[, int maxWidth]) 從指定坐標點位置開始繪制填充的文本文字。參數(shù)maxWidth是可選的，如果文本內(nèi)容寬度超過該參數(shù)設置，則會自動按比例縮小字體以適應寬度。與本方法對應的樣式設置屬性為fillStyle。 strokeText(string text, int x, int y[, int maxWidth]) 從指定坐標點位置開始繪制非填充的文本文字(文字內(nèi)部是空心的)。參數(shù)maxWidth是可選的，如果文本內(nèi)容寬度超過該參數(shù)設置，則會自動按比例縮小字體以適應寬度。該方法與fillText()用法一致，不過strokeText()繪制的文字內(nèi)部是非填充(空心)的，fillText()繪制的文字是內(nèi)部填充(實心)的。與本方法對應的樣式設置屬性為strokeStyle。
繪制圖片 在html5中，除了利用canvas繪制矢量圖形之外，我們還可以在canvas「畫布」上繪制現(xiàn)有的圖像文件。首先，我們來看看使用canvas繪制圖像文件需要用到CanvasRenderingContext2D對象的哪些主要屬性和方法：XML/HTML Code復制內(nèi)容到剪貼板 以canvas上指定的坐標點開始，按照圖像的原始尺寸大小繪制整個圖像。這里的image可以是Image對象，也可以是Canvas對象(下同)。 XML/HTML Code復制內(nèi)容到剪貼板 drawImage(mixedimage,intx,inty,intwidth,intheight) 以canvas上指定的坐標點開始，以指定的大小(width和height)繪制整個圖像，圖像將根據(jù)指定的尺寸自動進行相應的縮放。 drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight) 將指定圖像的局部圖像(以(imageX, imageY)為左上角、寬度為imageWidth、高度為imageHeight的矩形部分)繪制到canvas中以(canvasX,canvasY)為左上角坐標、寬度為canvasWidth、高度為canvasHeight的矩形區(qū)域中 是的，你沒有看錯。要在canvas中繪制圖像，我們可以使用一個名為drawImage()的方法，不過該方法具有三種不同的變體，每個方法變體允許接收的參數(shù)不僅數(shù)量不同，連參數(shù)的含義也不盡相同。在這里，我們對上述三個變體分別舉例說明。首先，我們使用drawImage()的第一個變體在canvas上繪制Google的logo圖片(原始尺寸為550 x 190)。JavaScript Code復制內(nèi)容到剪貼板 metacharset= UTF-8 title HTML5Canvas繪制圖像入門示例 /title /head body !--添加canvas標簽，并加上紅色邊框以便于在頁面上查看-- canvasid= myCanvas width= 400px height= 300px >對應的顯示效果如下：
