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

相关推荐: react modal如何实现关闭事件

今天小编给大家分享一下react modal如何实现关闭事件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。 react modal实现关闭事件的…