html5-Canvas可以在web中繪制各種圖形_HTML5教程
推薦:html5的新玩法——語(yǔ)音搜索谷歌的網(wǎng)站是時(shí)逛時(shí)新啊,今天在他們首頁(yè)發(fā)現(xiàn)了HTML5的新玩法——語(yǔ)音搜索�?上У氖侵挥衱ebkit核心的瀏覽器才能使用。用法很簡(jiǎn)單,只需要在input添加屬性x-webkit-speech即可
在HTML5/">html5中我覺(jué)得最重要的就是引入了Canvas,使得我們可以在web中繪制各種圖形。給人感覺(jué)單在這點(diǎn)上有點(diǎn)模糊我們web和桌面程序的感覺(jué)。在html5外web中也有基于xml的繪圖如:VML、SVG。而Canvas為基于像素的繪圖。Canvas是一個(gè)相當(dāng)于畫(huà)板的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ì)象,無(wú)論我們調(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():開(kāi)啟路徑的繪制,重置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():繪制弧,圓心位置、起始弧度、終止弧度來(lái)指定圓弧的位置和大��;
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!
好了,也晚了。附我的測(cè)試代碼,:
復(fù)制代碼 代碼如下:www.hl5o.cn
<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>
分享:html5聲頻audio和視頻video等新特性詳細(xì)說(shuō)明html5作為下一代web標(biāo)準(zhǔn),年前軒起了html5熱潮;html5聲頻audio和視頻video一直被網(wǎng)友們所關(guān)注,本人也是好奇于是搜集整理一些相關(guān)的東東,需要了解的朋友可以參考下
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5 application cache遇到的嚴(yán)重問(wèn)題
- html5 Canvas畫(huà)圖教程(8)—canvas里畫(huà)曲線之bezierCurveTo方法
- HTML5之SVG 2D入門(mén)3—文本與圖像及渲染文本介紹
- html5指南-4.使用Geolocation實(shí)現(xiàn)定位功能
- HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表 附打包下載
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- html5指南-1.html5全局屬性(html5 global attributes)深入理解
- html5 Canvas畫(huà)圖教程(10)—把面拆成線條模擬出圓角矩形
- HTML5之SVG 2D入門(mén)11—用戶交互性(動(dòng)畫(huà))介紹及應(yīng)用
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- 相關(guān)鏈接:
- 教程說(shuō)明:
HTML5教程-html5-Canvas可以在web中繪制各種圖形
。