【HTML】Canvas(3)-绘制图片
開發(fā)游戲的時(shí)候，游戲中的地圖、背景、任務(wù)、物品等都是由圖片組成的，這次我們來談?wù)勗赾anvas中如何操作圖片吧。
?????? canvas中提供了drawImage函數(shù)和putImageData函數(shù)來繪制圖片。
?????? drawImage()函數(shù)有3種函數(shù)原型，語(yǔ)法如下：
?????? drawImage(image,dx,dy);
?????? drawImage(image,dx,dy,dw,dh);
?????? drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
?????? 參數(shù)一image是要繪制的對(duì)象，這個(gè)參數(shù)可以是HTMLImageELement、HTMLCanvasElement、HTMLVideoElement,
?????? dx,dy是image在canvas中定位的坐標(biāo)值，
?????? dw,dh表示image在canvas中即將繪制的區(qū)域（相對(duì)dx和dy坐標(biāo)的偏移量）的寬度和高度值，
?????? sx,sy是image所要繪制的起始位置，
?????? sw,sh是image所要繪制的區(qū)域（相對(duì)image的sx和sy坐標(biāo)的偏移量）的寬度和高度值
??????
?????? 先準(zhǔn)備好HTML部分：
<body>img標(biāo)簽<br/><img src="../images/travel.jpg" id="travel" alt="travel" title="travel"/><br/><br/><br/>canvas畫板<br/><!-- PS:畫板要設(shè)定寬高值，且要不能小于原圖，否則圖片會(huì)顯示不完整 --><canvas id="mycanvas" width="500" height="500"> 你的瀏覽器不支持HTML5</canvas> </body>
Javascript部分：
?????? 方法一：通過<img>標(biāo)簽來獲取
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');//獲取圖片id,取得圖片數(shù)據(jù)var img=document.getElementById('travel');//用drawImage()函數(shù)將圖片繪制到畫板上ctx.drawImage(img,0,0); 方法二：通過javascript的Image對(duì)象來獲取
先創(chuàng)建一個(gè)Image對(duì)象，然后通過設(shè)置src屬性來載入圖片，接著添加onload事件偵聽，當(dāng)圖片載入完成時(shí)將其繪制到畫板上。
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');var img=new Image();img.src='../images/travel.jpg';img.οnlοad=function(){ctx.drawImage(img,0,0);};
我們來具體看下 drawImage函數(shù)的3種函數(shù)原型的用法和區(qū)別：
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');var image=new Image();image.src='../images/travel.jpg';image.οnlοad=function(){//表示從坐標(biāo)(0,0)開始繪制整張圖片ctx.drawImage(image,0,0);//表示從坐標(biāo)(200,0)開始繪制整張圖片到長(zhǎng)100，寬100的矩形區(qū)域內(nèi)ctx.drawImage(image,200,0,100,100);//表示截取圖片從(50,50)到(100,80)的部分，從坐標(biāo)(200,110)開始繪制放到長(zhǎng)100，寬60的矩形區(qū)域內(nèi)ctx.drawImage(image,50,50,100,80,200,110,100,60);};
還有一種繪制圖片的方法，就是利用getImageData和putImageData繪制圖片：
?????? putImageData(imgdata,dx,dy,sx,sy,sw,sh)函數(shù)的7個(gè)參數(shù)中，imgdata是像素?cái)?shù)據(jù)，dx,dy是繪制圖片的定位坐標(biāo)值，sx,sy是imgdata所要繪制圖片的其實(shí)位置，sw,sh是imgdata所要繪制區(qū)域（相對(duì)imgdata的sx,sy坐標(biāo)的偏移量）的寬度和高度值。后4個(gè)參數(shù)可以省略，此時(shí)表示繪制整個(gè)imgdata
?????? 在使用putImageData()前，需先用getImageData(x,y,w,h)函數(shù)得到像素?cái)?shù)據(jù)，即從canvas畫板上取得所選區(qū)域的像素?cái)?shù)據(jù)，它的4個(gè)參數(shù)分別是：選擇區(qū)域七點(diǎn)的坐標(biāo)x和坐標(biāo)y，選擇區(qū)域的長(zhǎng)和寬。
?????? putImageData(imagedata,dx,dy,x,y,w,h)函數(shù)則表示將所得到的像素?cái)?shù)據(jù)描畫到canvas畫板上形成圖形。var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');var image=new Image();image.src='../images/travel.jpg';image.οnlοad=function(){ctx.drawImage(image,0,0);var imgData=ctx.getImageData(50,50,192,168);ctx.putImageData(imgData,200,260);ctx.putImageData(imgData,200,260,50,50,100,100);}; 注：使用getImageData函數(shù)獲取圖片數(shù)據(jù)，此函數(shù)在chrome，Firefox，ie等瀏覽器中會(huì)涉及跨域問題，所以無法直接在瀏覽器中瀏覽，必須通過服務(wù)器來訪問測(cè)試。
Author:致知
Sign:路漫漫其修遠(yuǎn)兮，吾將上下而求索。
附：
【HTML】Canvas(1)-繪制圖形
【HTML】Canvas(2)-繪制文本
【HTML】Canvas(4)-進(jìn)階
總結(jié)
以上是生活随笔為你收集整理的【HTML】Canvas(3)-绘制图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 静态路由，缺省路由和默认网关的区别
- 下一篇： HTML——表白树动画