| 一、創建圖像對象
在 HTML5 中，Image 對象對應著一幅圖片，想要獲取一個圖像對象，有以下幾種方法：
1) 通過 document.images 集合、document.getElementsByTagName 方法或者 document.getElementById 方法來獲取網頁內已經存在的圖片對象；
2) 用 document.getElementsByTagName 或 document.getElementById 方法來獲取另外一個 Canvas 對象，將這個 Canvas 對象作為一個圖像對象；
3) 最常用的方法：創建一個新的空 Image 對象，給他一個圖片的超鏈接，代碼如下：
|
|
|
//創建一個空圖像對象
var img = new Image();
//給圖像對象一個圖片超鏈接
img.src = 'myImage.png';
4) 最后一種是通過 data: url 方式嵌入圖像，這種方法很奇妙，他可以用一個很長的字符串來表示一幅圖像。
那么這個很長的字符串是怎么來的呢？他是把真正的圖像文件（bmp jpg 等等）通過 Base64 編碼而來，具體的編碼程序網上能搜索到很多，我博客里就有一個 Python 版的。
用這種方式的好處就是，圖片資源始終內嵌在 HTML 網頁文件中，缺點是數據量太大，而且圖片沒辦法緩存，導致網頁文件打開速度變慢
下面的字符串就是一幅美女圖片的 Base64 編碼的一小段，讓大家看看是什么樣子的：
/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw
這些亂七八糟的東西就包含了美女圖片的一小部分內容了，后面我們將把它繪制到 Canvas 上
二、繪制圖像對象
我們得到一個圖像對象后，它只是在內存中，我們怎么才能將它繪制到畫布上呢？ 上下文對象有一個繪制圖像對象的方法：
drawImage(image, x, y)
簡單吧？image 就是你事先準備好的圖像對象，x, y 就是圖像左上角放置的位置 ，這個方法調用后，你的圖像就會出現在 Canvas 上了
下面我們來把上面的美女圖像繪制出來，代碼如下：
代碼
<canvas id="canvas1" width="250" height="300" style="background-color:black">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器
</canvas><br/>
<input type="button" value="顯示美女" onclick="Show();" />
<input type="button" value="清空" onclick="Clear();" />
<script type="text/javascript">
//美女圖的 Base64 編碼
IMG_SRC='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......'//省略40字節
//縮小版本的美女圖
IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......'//省略40字節
function Show(){
//獲取畫布對象
ctx = document.getElementById("canvas1").getContext("2d");
//創建圖像對象
img=new Image();
//圖像被裝入后觸發
img.onload=function(){
ctx.drawImage(img,0,0);
}
//指定圖像源
img.src=IMG_SRC;
}
function Clear(){
//清除畫布
ctx = document.getElementById("canvas1").getContext("2d");
ctx.clearRect(0,0,250,300);
}
</script>
注意：把繪制方法放到圖像對象的 onload 事件中，是為了確保圖像在完全裝入后才繪制
三、縮放圖像
同樣的 imageDraw 方法，增加兩個參數，就可以對圖像實現縮放，如下：
drawImage(image, x, y, width, height)
width 代表你想將圖像繪制成多寬，height 代表你想將圖像繪制成多高，設定好后系統會自動按比例進行縮放。
下面的例子我們來模仿一個常見的圖像軟件的小功能，通過拖動滑動條對圖像進行縮放，代碼如下：
代碼
<canvas id="canvas2" width="250" height="300" style="background-color:black">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器
</canvas><br/>
注意：下面的 Range 控件只能在 Google Chrome 瀏覽器中正確呈現
橫向縮放<input type="range" min="1" max="20" onchange="Scale1(event)"/><br/>
縱向縮放<input type="range" min="1" max="20" onchange="Scale2(event)"/><br/>
按比例縮放<input type="range" min="1" max="20" onchange="Scale3(event)"/><br/>
平鋪<input type="range" min="1" max="10" value="1" onchange="Scale4(event)"/><br/>
<script type="text/javascript">
function Scale1(){
//計算比例
var scale=event.target.value/10
///獲取畫布對象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//創建圖像對象
img=new Image();
//圖像被裝入后觸發
img.onload=function(){
//橫向縮放繪制
ctx.drawImage(img,0,0,img.width*scale,img.height);
}
//指定圖像源
img.src=IMG_SRC;
}
function Scale2(){
//計算比例
var scale=event.target.value/10
///獲取畫布對象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//創建圖像對象
img=new Image();
//圖像被裝入后觸發
img.onload=function(){
//縱向縮放繪制
ctx.drawImage(img,0,0,img.width,img.height*scale);
}
//指定圖像源
img.src=IMG_SRC;
}
function Scale3(){
//計算比例
var scale=event.target.value/10
///獲取畫布對象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//創建圖像對象
img=new Image();
//圖像被裝入后觸發
img.onload=function(){
//按比例縮放繪制
ctx.drawImage(img,0,0,img.width*scale,img.height*scale);
}
//指定圖像源
img.src=IMG_SRC;
}
function Scale4(){
//平鋪比例
var scale=event.target.value;
///獲取畫布對象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//創建圖像對象
img=new Image();
//圖像被裝入后觸發
img.onload=function(){
//平鋪個數
var n1=img.width/scale;
var n2=img.height/scale;
for(var i=0;i<n1;i++)
for(var j=0;j<n2;j++)
ctx.drawImage(img,i*img.width/scale,j*img.height/scale,img.width/scale,img.height/scale);
}
//指定圖像源
img.src=IMG_SRC;
}
</script>
注意：下面的 Range 控件只能在 Google Chrome 瀏覽器中正確呈現
橫向縮放
縱向縮放
按比例縮放
平鋪
提示：
只有在 Google Chrome 瀏覽器中，Range 控件才能呈現出滑動條的的樣子并正確工作；
在其他瀏覽器中，您可能只能看到四個文本框，并且無法正常工作
四、裁剪圖像
圖像裁剪同樣是使用 imageDraw 方法，原型如下：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，其中
sx, sy 是圖像上的一個坐標位置，這個坐標是裁剪的起始點
sWidth, sHeight 是裁剪的寬度和長度
有了這四個參數，我們就可以將圖像上的任意區域裁剪出來了
另外
dx, dy 是畫布上的一個坐標為止，裁剪出來的圖像的左上角將放置在這個位置
dWidth, dHeight 是設置裁剪出來的圖像繪制成多長和多寬，可以縮放
裁剪圖像比較簡單，就不給例子了
五、圖案
在上面的圖像縮放中，我們用循環的方法實現了圖像的平鋪，其實還有更方便的方法，就是用圖案對象填充畫布，圖案對象用下面的方法創建：
createPattern(image,type)
其中，Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
得到圖案對象后，可以將其設置給上下文對象的 fillStyle 屬性，然后再填充畫布，就可以看到重復填充的效果了。
下面的代碼中，我們將把縮小版本的美女圖用 repeat 模式，平鋪到畫布上：
圖案
<canvas id="canvas3" width="250" height="300" style="background-color:black">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器
</canvas><br/>
<input type="button" value="貼圖" onclick="Patterns();" />
<input type="button" value="清空" onclick="ClearPatterns();" />
<script type="text/javascript">
//美女圖的縮小版本
IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBA......';//省略四個字節
function Patterns(){
///獲取畫布對象
ctx = document.getElementById("canvas3").getContext("2d");
//創建圖像對象
img=new Image();
//指定圖像源
img.src=IMG_SRC_SMALL;
//圖像被裝入后觸發
img.onload=function(){
//創建圖案
var ptrn = ctx.createPattern(img,'repeat');
//將圖案設置為填充樣式
ctx.fillStyle = ptrn;
//填充畫布
ctx.fillRect(0,0,250,300);
}
}
function ClearPatterns(){
///獲取畫布對象
ctx = document.getElementById("canvas3").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
}
</script>
六、字體
HTML5 的沒有專門的字體對象，上下文對象中有三個屬性用來設置字體，兩個方法來繪制字符串，他們是：
font：文字字體，同 CSS font-family 屬性
textAlign：文字水平對齊方式。可取屬性值: start, end, left, right, center。默認值: start.
textBaseline：文字豎直對齊方式。可取屬性值：top, hanging, middle, alphabetic, ideographic, bottom。默認值：alphabetic.
fillText 和 strokeText：用填充方式和輪廓方式繪制字符串
下面的代碼繪制兩個不同設置的 Hello World 字符串
代碼
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
//輪廓字符串
context.strokeText('Hello world!', 0, 50);
下圖是上面的代碼運行效果：
//==========================================
posted on 2010-10-04 16:45
左洸 閱讀(2889)
評論(0) 編輯 收藏 所屬分類:
HTML5