html5入門資訊，html5入門

html5入門資訊，html5入門

1、canvas

1）介紹：HTML5 <canvas> 標籤用於繪製映像（通過指令碼，通常是 JavaScript）。不過，<canvas> 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用指令碼來完成實際的繪圖任務。getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
2）

屬性	描述
fillStyle	設定或返回用於填充繪畫的顏色、漸層或模式
strokeStyle	設定或返回用於筆觸的顏色、漸層或模式
shadowColor	設定或返回用於陰影的顏色
shadowBlur	設定或返回用於陰影的模糊層級
shadowOffsetX	設定或返回陰影距形狀的水平距離
shadowOffsetY	設定或返回陰影距形狀的垂直距離

方法	描述
createLinearGradient()	建立線性漸層（用在畫布內容上）
createPattern()	在指定的方向上重複指定的元素
createRadialGradient()	建立放射狀/環形的漸層（用在畫布內容上）
addColorStop()	規定漸層對象中的顏色和停止位置

       

    canvas元素繪製映像的時候有兩種方法，分別是

        context.fill()//填充

        context.stroke()//繪製邊框

    style:在進行圖形繪製前，要設定好繪圖的樣式

        context.fillStyle//填充的樣式

        context.strokeStyle//邊框樣式

    context.lineWidth//圖形邊框寬度

shadowOffsetX 屬性設定或返回形狀與陰影的水平距離。

shadowOffsetX=0 指示陰影位於形狀的正下方。

shadowOffsetX=20 指示陰影位於形狀 left 位置右側的 20 像素處。

shadowOffsetX=-20 指示陰影位於形狀 left 位置左側的 20 像素處。