HTML5 Canvas中繪制矩形實(shí)例

讓我們來看一下Canvas內(nèi)置的簡(jiǎn)單幾何圖形

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有奉化免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

—

矩形的繪制。在Canvas中，繪制矩形有三種方法：填充(fillRect)、描邊(StrokeRect)以及清除(clearRect)。當(dāng)然，我們也可以使用“路徑”來描繪包括矩形在內(nèi)的所有圖形。

以下是上述三種方法的API:

1.fillRect(x,y,width,height)。繪制一個(gè)從(x,y)開始，寬度為width，高度為height的實(shí)心矩形。

2.strokeRect(x,y,width,height)。繪制一個(gè)從(x,y)開始，寬度為width，高度為height的矩形框。該矩形框會(huì)根據(jù)當(dāng)前設(shè)置的strokeStyle、lineWidth、lineJoin和miterLimit屬性的不同而渲染成不同的樣式。

3.clearRect(x,y,width,height)。清除從(x,y)開始，寬度為width，高度為height的矩形區(qū)域，使之完全透明。

在調(diào)用上述方法繪制Canvas之前，我們需要設(shè)定填充和描邊的樣式。設(shè)定這些樣式最基本的方法是使用24位色(用16進(jìn)制字符串表示)。以下是一個(gè)簡(jiǎn)單的例子：

代碼如下:

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

在下面的例子中，填充色設(shè)定為黑色，而描邊色則設(shè)定為紫色：

代碼如下:

function

drawScreen()

{

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

context.lineWidth

=

2;

context.fillRect(10,

10,

40,

40);

context.strokeRect(0,

0,

60,

60);

context.clearRect(20,

20,

20,

20);

}

代碼執(zhí)行結(jié)果如下圖所示：

如何在html5的canvas繪制地圖

我這里認(rèn)為大家都稍微了解甚至熟悉canvas的一些API，就不具體說，每一個(gè)參數(shù)代表什么意思了。

!DOCTYPE html

html

head

meta charset='utf-8'

title圖片加載平移放大縮小示例/title

style

html,body{

margin:0px;

padding:0px;

}

canvas{

border: 1px solid #000;

}

/style

/head

body

canvas id="canvas" width="800" height="800"/canvas

script type="text/javascript" src="main.js"/script

/body

/html

var canvas,context;

function int(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

}

圖片加載

創(chuàng)建一個(gè)圖片對(duì)象之后，圖片不能馬上繪制到canvas上面，因?yàn)閳D片還沒有加載完成。所以我們需要監(jiān)聽圖片對(duì)象加載完事件，然后再去繪制。

var img,//圖片對(duì)象

imgIsLoaded//圖片是否加載完成;

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

//draw image

}

img.src="map.jpg";

}

圖片繪制

繪制圖像一個(gè)函數(shù)就可以搞定，但是需要記錄這個(gè)圖像的左上角坐標(biāo)以及縮放比例。

var imgX,imgY,imgScale;

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

圖片平移

html5事件最小細(xì)度在DOM上，所以我們無法對(duì)canvas上的圖像做監(jiān)聽，只能對(duì)canvas監(jiān)聽。

首先監(jiān)聽鼠標(biāo)mousedown事件，等事件發(fā)生之后，再監(jiān)聽鼠標(biāo)mousemove事件和mouseup事件

mousemove事件發(fā)生之后，獲得鼠標(biāo)移動(dòng)的位移，相應(yīng)的圖片的位置改變多少

mouseup事件發(fā)生之后，取消對(duì)mousemove以及mouseup事件監(jiān)聽

canvas.onmousedown=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.onmousemove=function(event){

canvas.style.cursor="move";

var pos1=windowToCanvas(canvas,event.clientX,event.clientY);

var x=pos1.x-pos.x;

var y=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.onmouseup=function(){

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.style.cursor="default";

}

}

function windowToCanvas(canvas,x,y){

var bbox = canvas.getBoundingClientRect();

return {

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

}

圖片縮放

其實(shí)縮放很簡(jiǎn)單，稍微復(fù)雜的是，如何讓鼠標(biāo)成為放大或者縮小的中心。如果數(shù)學(xué)幾何不好，計(jì)算公式就可能看不明白了。

canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox瀏覽器兼容

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

這個(gè)時(shí)候，基本功能就實(shí)現(xiàn)了，加載一張圖片和加載多張圖片都差不多，維護(hù)每一張圖片的位置和大小，下面來整理一下代碼吧。

var canvas,context;

var img,//圖片對(duì)象

imgIsLoaded,//圖片是否加載完成;

imgX=0,

imgY=0,

imgScale=1;

(function int(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

loadImg();

})();

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

drawImage();

}

img.src="map.jpg";

}

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

canvas.onmousedown=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.onmousemove=function(event){

canvas.style.cursor="move";

var pos1=windowToCanvas(canvas,event.clientX,event.clientY);

var x=pos1.x-pos.x;

var y=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.onmouseup=function(){

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.style.cursor="default";

}

}

canvas.onmousewheel=canvas.onwheel=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

function windowToCanvas(canvas,x,y){

var bbox = canvas.getBoundingClientRect();

return {

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

HTML5揭秘怎么樣

大部分內(nèi)容都是蜻蜓點(diǎn)水的說了一下，實(shí)際的開發(fā)都沒有寫。 關(guān)于視頻的部分，用了不少篇幅介紹轉(zhuǎn)碼軟件的使用我認(rèn)為有些多余。 很多文字都是重復(fù)的，總覺得有騙稿費(fèi)嫌疑。 好在前面關(guān)于新標(biāo)簽的介紹還算詳細(xì)，算是比較適合當(dāng)作 第一本 的HTML5書籍。 如果不做開發(fā)，只是重構(gòu)過渡到html5，看看這本書倒是足夠。 我更推薦看英文的網(wǎng)頁版，省得買咯，畢竟沒有很深的東西。

分享文章：html5幾何,html5概述
轉(zhuǎn)載來源：http://jinyejixie.com/article40/dsdjiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、微信小程序、網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)