DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5-Canvas可以在web中繪制各種圖形
html5-Canvas可以在web中繪制各種圖形
編輯:HTML5詳解     
在Html5/">Html5中我覺得最重要的就是引入了Canvas,使得我們可以在web中繪制各種圖形。給人感覺單在這點上有點模糊我們web和桌面程序的感覺。在Html5外web中也有基於XML的繪圖如:VML、SVG。而Canvas為基於像素的繪圖。Canvas是一個相當於畫板的Html節點,我們必須以JS操作繪圖。 
如下: 
<canvas id="myCanvas" width="600" height="300">你的浏覽器還不支持哦</canvas>定義。 
我們可以獲取canvas對象為var c=document.getElementById("myCanvas");其應有JS屬性方法如下列舉: 
1:繪制渲染對象,c.getContext("2d"),獲取2d繪圖對象,無論我們調用多少次獲取的對象都將是相同的對象。 
2:繪制方法
clecrRect(left,top,width,height)清除制定矩形區域, 
fillRect(left,top,width,height)繪制矩形,並以fillStyle填充。 
fillText(text,x,y)繪制文字; 
strokeRect(left,top,width,height)繪制矩形,以strokeStyle繪制邊界。 
beginPath():開啟路徑的繪制,重置path為初始狀態; 
closePath():繪制路徑path結束,它會繪制一個閉合的區間,添加一條起始位置到當前坐標的閉合曲線; 
moveTo(x,y):設置繪圖其實坐標。 
lineTo(x,y);繪制從當前其實位置到x,y直線。 
fill(),stroke(),clip():在完成繪制的最後的填充和邊界輪廓,剪輯區域。 
arc():繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小; 
rect():矩形路徑; 
drawImage(Imag img):繪制圖片; 
quadraticCurveTo():二次樣條曲線路徑,參數兩個控制點; 
bezIErCurveTo():貝塞爾曲線,參數三個控制點; 
createImageData,getImageData,putImageData:為Canvas中像素數據。ImageData為記錄width、height、和數據 data,其中data為我們色素的記錄為 
argb,所以數組大小長度為width*height*4,順序分別為rgba。getImageData為獲取矩形區域像素,而putImageData則為設置矩形區域像素; 
… and so on! 
3:坐標變換: 
translate(x,y):平移變換,原點移動到坐標(x,y); 
rotate(a):旋轉變換,旋轉a度角; 
scale(x,y):伸縮變換; 
save(),restore():提供和一個堆棧,保存和恢復繪圖狀態,save將當前繪圖狀態壓入堆棧,restore出棧,恢復繪圖狀態; 
… and so on! 
好了,也晚了。附我的測試代碼,: 

復制代碼代碼如下:www.mb5u.com
<Html> 
<head> 
</head> 
<body> 
<canvas id="myCanvas" width="600" height="300">你的浏覽器還不支持哦</canvas> 
<script type="text/Javascript"> 
var width,height,top,left; 
width=height=100; 
top=left=5; 
var x=10; 
var y=10; 
var c=document.getElementById("myCanvas"); 
var maxwidth=c.width-5; 
var maxheight=c.height-5; 
var cxt=c.getContext("2d"); 
cxt.strokeStyle="#00f"; 
cxt.strokeRect(0,0,c.width,c.height); 
var img=new Image(); 
img.src="1.gif"; 
var MyInterval=null; 
start(); 
function Refresh(){ 
cxt.clearRect(left,top,width,height); 
if((left+x)>(maxwidth-width)||left+x<0){ 
x=-x; 

if((top+y)>(maxheight-height)||top+y<0){ 
y=-y; 

left=left+x; 
top=top+y; 
cxt.drawImage(img,left,top,width,height); 
cxt.font="20pt 宋體"; 
cxt.fillText("破狼",left,top+25); 

function start(){ 
if(MyInterval==null){ 
MyInterval=setInterval("Refresh()",100); 


function stop(){ 
if(MyInterval!=null){ 
clearInterval(MyInterval); 
MyInterval=null; 


function InRectangle(x,y,rectx,recty,rwidth,rheight){ 
return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight) 

c.onmouSEOver=function(e){ 
if(InRectangle(e.clientX,e.clIEntY,left,top,width,height)){ 
stop(); 

c.onmouSEOut=function(e){ 
start(); 

c.onmousemove=function(e){ 
if(InRectangle(e.clientX,e.clIEntY,left,top,width,height)){ 
if(MyInterval!=null){ 
stop(); 

}else{ 
start(); 



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