HTML5 Canvas切片Slicing的示例分析

小编给大家分享一下HTML5 Canvas切片Slicing的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。
说明
代码

function draw() {
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(‘2d’);
var image = new Image();
image.onload = function(){
//将图片从0,0开始截取100×50的大小在canvas中的0,0位置显示,大小为200×100
ctx.drawImage(image,0,0,100,50,0,0,200,100);
}
image.src = ‘../image/a.jpg’;
}
script>

head>

body>
html>
效果
说明
鼠标移动到图片上，canvas中显示放大的部分图片，并且可以手动设置放大倍数，兼容IE和FF。重写event的代码是为了兼容FF，重写后使用event可以得到FF的事件对象。getAbsoluteTop方法获取某个控件距离body的上边距，这样再结合鼠标点击事件的坐标就可以得到点击免费云主机域名事件相对于图片的坐标了，另外IE中还需要另外考虑滚动条的位置，可以用document.body.scrollTop获取。另外还有一个BUG，图片如果没有按照正常比例显示，则会出错，如过强制设定width和height，ctx.drawImage还是会按照坐标在原图片中对应的位置来计算。
代码

/*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>

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的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注百云主机行业资讯频道！

相关推荐: html5 css3的辅助工具有哪些

这篇文章主要讲解了“html5 css3的辅助工具有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5 css3的辅助工具有哪些”吧！ 　　CSS Animatie 　　CSS Animatie是一款…