切片后的图做成html,HTML5 Canvas切片 Slicing

drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。

切片示例1

说明

此例中将图片的一部分取出来放大显示。

代码

functiondraw() {

varcanvas = document.getElementById('canvas');

varctx = canvas.getContext('2d');

varimage =newImage();

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>

测试图像3title>

head>

body>

html>

效果

切片示例2-图片放大

说明

鼠标移动到图片上，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(){

returnthis.style;

}

function__window_event(){

return__window_event_constructor();

}

function__event_srcElement(){

returnthis.target;

}

function__window_event_constructor(){

if(document.all){

returnwindow.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;

}

returnnull;

}

if(window.addEventListener){

__firefox();

}

/*end firefox*/

script>

varpower = 2;

getAbsoluteTop =function(obj){

//获取指定元素左上角的纵坐标(相对于body)

varselfTop = 0;

varelement = obj;

if(document.body.scrollTop){//在ie下有值,FF没有

selfTop = 0 - document.body.scrollTop;//消除IE下的滚动条的影响

}

while(element){

selfTop = selfTop + element.offsetTop;

element = element.offsetParent;

};

returnselfTop;

}

getAbsoluteLeft =function(obj){

//获取指定元素左上角的纵坐标(相对于body)

varselfLeft = 0;

varelement = obj;

if(document.body.scrollLeft){

selfLeft = 0 - document.body.scrollLeft;

}

while(element){

selfLeft = selfLeft + element.offsetLeft;

element = element.offsetParent;

};

returnselfLeft;

}

functionmouseover(e) {

document.getElementById("img1").onmousemove =function(e){}

}