13390130939售前咨詢電話 31891684售后服務(wù)電話
13390130939技術(shù)咨詢 31891684傳真
build網(wǎng)站制作 |
【html5】Canvas繪圖當(dāng)前位置：首頁>主要服務(wù)>網(wǎng)站制作>html 在html5中我覺得最重要的就是引入了Canvas ，使得我們可以在web中繪制各種圖形 。給人感覺單在這點(diǎn)上有點(diǎn)模糊我們web和桌面程序的感覺。在html5外web中也有基于xml的繪圖如：VML 、SVG。而Canvas為基于像素的繪圖 。Canvas是一個(gè)相當(dāng)于畫板的html節(jié)點(diǎn) ，我們必須以js操作繪圖。
如下：
<canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas>定義 。 我們可以獲取canvas對(duì)象為var c=document.getElementById("myCanvas");其應(yīng)有js屬性方法如下列舉：
1：繪制渲染對(duì)象，c.getContext("2d"),獲取2d繪圖對(duì)象 ，無論我們調(diào)用多少次獲取的對(duì)象都將是相同的對(duì)象。
2：繪制方法： clecrRect(left,top,width,height)清除制定矩形區(qū)域 ； fillRect(left,top,width,height)繪制矩形，并以fillStyle填充 ； fillText（text,x,y）繪制文字 ； strokeRect(left,top,width,height)繪制矩形 ，以strokeStyle繪制邊界 ； beginPath():開啟路徑的繪制,重置path為初始狀態(tài) ； closePath():繪制路徑path結(jié)束 ，它會(huì)繪制一個(gè)閉合的區(qū)間 ，添加一條起始位置到當(dāng)前坐標(biāo)的閉合曲線； moveTo（x ，y）：設(shè)置繪圖其實(shí)坐標(biāo) ； lineTo(x，y);繪制從當(dāng)前其實(shí)位置到x ，y直線； fill（） ，stroke（），clip（）：在完成繪制的最后的填充和邊界輪廓 ，剪輯區(qū)域； arc（）：繪制弧,圓心位置 、起始弧度 、終止弧度來指定圓弧的位置和大?div id="jpandex" class="focus-wrap mb20 cf">。?/p> rect():矩形路徑 ；drawImage（Imag img）：繪制圖片； quadraticCurveTo():二次樣條曲線路徑,參數(shù)兩個(gè)控制點(diǎn) ；bezierCurveTo（）：貝塞爾曲線，參數(shù)三個(gè)控制點(diǎn) ；createImageData,getImageData，putImageData:為Canvas中像素?cái)?shù)據(jù) 。ImageData為記錄width、height 、和數(shù)據(jù) data，其中data為我們色素的記錄為argb ，所以數(shù)組大小長(zhǎng)度為width*height*4 ，順序分別為rgba 。getImageData為獲取矩形區(qū)域像素 ，而putImageData則為設(shè)置矩形區(qū)域像素 ； … and so on ！
3：坐標(biāo)變換： translate（x,y）：平移變換 ，原點(diǎn)移動(dòng)到坐標(biāo)（x ，y）； rotate（a）：旋轉(zhuǎn)變換 ，旋轉(zhuǎn)a度角； scale（x ，y）：伸縮變換
；
save（） ，restore（）：提供和一個(gè)堆棧，保存和恢復(fù)繪圖狀態(tài)，save將當(dāng)前繪圖狀態(tài)壓入堆棧，restore出棧，恢復(fù)繪圖狀態(tài)；… and so on ！
網(wǎng)站動(dòng)態(tài)
|
易勢(shì)網(wǎng)站制作，以DIV+CSS為主
，js/jQuery為輔，制作利于優(yōu)化，頁面美觀的優(yōu)質(zhì)網(wǎng)站！
網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽易勢(shì)科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營(yíng)銷公司 © 2011 , All rights reserved. 公司地址：沈陽市鐵西區(qū)貴和街道建設(shè)中路15號(hào)淺草綠閣商務(wù)樓402室沈陽網(wǎng)站制作易勢(shì)最專業(yè)
遼B2-20150173-8
