小编给大家分享一下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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
