html5-Canvas可以在web中繪制各種圖形

2020-03-24 17:56:47

字體：大中小

來源：轉載

供稿：網(wǎng)友

在html5中我覺得最重要的就是引入了Canvas，使得我們可以在web中繪制各種圖形。給人感覺單在這點上有點模糊我們web和桌面程序的感覺。在html5外web中也有基于xml的繪圖如：VML、SVG。而Canvas為基于像素的繪圖。Canvas是一個相當于畫板的html節(jié)點，我們必須以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)清除制定矩形區(qū)域，
fillRect(left,top,width,height)繪制矩形，并以fillStyle填充。
fillText（text,x,y）繪制文字；
strokeRect(left,top,width,height)繪制矩形，以strokeStyle繪制邊界。
beginPath():開啟路徑的繪制,重置path為初始狀態(tài)；
closePath():繪制路徑path結束，它會繪制一個閉合的區(qū)間，添加一條起始位置到當前坐標的閉合曲線；
moveTo（x，y）：設置繪圖其實坐標。
lineTo(x，y);繪制從當前其實位置到x，y直線。
fill（），stroke（），clip（）：在完成繪制的最后的填充和邊界輪廓，剪輯區(qū)域。
arc（）：繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小；
rect():矩形路徑;
drawImage（Imag img）：繪制圖片；
quadraticCurveTo():二次樣條曲線路徑,參數(shù)兩個控制點；
bezierCurveTo（）：貝塞爾曲線，參數(shù)三個控制點；
createImageData,getImageData，putImageData:為Canvas中像素數(shù)據(jù)。ImageData為記錄width、height、和數(shù)據(jù) data，其中data為我們色素的記錄為
argb，所以數(shù)組大小長度為width*height*4，順序分別為rgba。getImageData為獲取矩形區(qū)域像素，而putImageData則為設置矩形區(qū)域像素；
and so on！
3：坐標變換：
translate（x,y）：平移變換，原點移動到坐標（x，y）；
rotate（a）：旋轉變換，旋轉a度角；
scale（x，y）：伸縮變換；
save（），restore（）：提供和一個堆棧，保存和恢復繪圖狀態(tài)，save將當前繪圖狀態(tài)壓入堆棧，restore出棧，恢復繪圖狀態(tài)；
and so on！
好了，也晚了。附我的測試代碼，：

復制代碼代碼如下:
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.stroke ;
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. unction(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
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。