小編給大家分享一下HTML5 Canvas切片Slicing的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
drawImage 方法的第三個也是最后一個變種有8個新參數，用于控制做切片顯示的。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。其它8個參數最好是參照右邊的圖解，前4個是定義圖像源的切片位置和大小，后4個則是定義切片的目標顯示位置和大小。
切片是個做圖像合成的強大工具。假設有一張包含了所有元素的圖像，那么你可以用這個方法來合成一個完整圖像。例如，你想畫一張圖表，而手上有一個包含所有必需的文字的 PNG 文件，那么你可以很輕易的根據實際數據的需要來改變最終顯示的圖表。這方法的另一個好處就是你不需要單獨裝載每一個圖像。
說明
代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function(){
//將圖片從0,0開始截取100x50的大小在canvas中的0,0位置顯示,大小為200x100
ctx.drawImage(image,0,0,100,50,0,0,200,100);
}
image.src = '../image/a.jpg';
}
script>
<title>測試圖像3title>
head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
body>
html>
效果
說明
鼠標移動到圖片上，canvas中顯示放大的部分圖片，并且可以手動設置放大倍數，兼容IE和FF。重寫event的代碼是為了兼容FF，重寫后使用event可以得到FF的事件對象。getAbsoluteTop方法獲取某個控件距離body的上邊距，這樣再結合鼠標點擊事件的坐標就可以得到點擊事件相對于圖片的坐標了，另外IE中還需要另外考慮滾動條的位置，可以用document.body.scrollTop獲取。另外還有一個BUG，圖片如果沒有按照正常比例顯示，則會出錯，如過強制設定width和height，ctx.drawImage還是會按照坐標在原圖片中對應的位置來計算。
代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
/*firefox*/
//重寫event事件
function __firefox(){
HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style);
window.constructor.prototype.__defineGetter__("event", __window_event);
Event.prototype.__defineGetter__("srcElement", __event_srcElement);
}
function __element_style(){
return this.style;
}
function __window_event(){
return __window_event_constructor();
}
function __event_srcElement(){
return this.target;
}
function __window_event_constructor(){
if(document.all){
return window.event;
}
var _caller = __window_event_constructor.caller;
while(_caller!=null){
var _argument = _caller.arguments[0];
if(_argument){
var _temp = _argument.constructor;
if(_temp.toString().indexOf("Event")!=-1){
return _argument;
}
}
_caller = _caller.caller;
}
return null;
}
if(window.addEventListener){
__firefox();
}
/*end firefox*/
script>
<script type="text/javascript">
var power = 2;
getAbsoluteTop = function(obj){
//獲取指定元素左上角的縱坐標（相對于body）
var selfTop = 0;
var element = obj;
if(document.body.scrollTop){//在ie下有值,FF沒有
selfTop = 0 - document.body.scrollTop;//消除IE下的滾動條的影響
}
while(element){
selfTop = selfTop + element.offsetTop;
element = element.offsetParent;
};
return selfTop;
}
getAbsoluteLeft = function(obj){
//獲取指定元素左上角的縱坐標（相對于body）
var selfLeft = 0;
var element = obj;
if(document.body.scrollLeft){
selfLeft = 0 - document.body.scrollLeft;
}
while(element){
selfLeft = selfLeft + element.offsetLeft;
element = element.offsetParent;
};
return selfLeft;
}
function mouseover(e) {
document.getElementById("img1").onmousemove = function(e){}
}
以上是“HTML5 Canvas切片Slicing的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
