html 图片坐标,关于HTML中集成图片 用img标签取坐标 还有 background取个范围平铺的問題。...

坐标裁剪图片需要用到HTML5的canvas表现，配合JS实现，记得把IMAGE的路径改一个可用的，就可以看到效果了，你的第二问我没看懂

代码如下

!doctype html

htmlhead

style

body {margin: 0px;padding: 0px;}

#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}

/style

script

window.onload = function(){

var canvas = document.getElementById(mc);

var context0 = canvas.getContext(2d);

var canvas = document.getElementById(myCanvas);

var context = canvas.getContext(2d);

var image01 = new Image()

var image02 = new Image();

image02.onload = function(){

// draw cropped image

var sourceX = 150;

var sourceY = 0;

var sourceWidth = 300;

var sourceHeight = 300;

var destWidth = sourceWidth;

var destHeight = sourceHeight;

var destX = canvas.width / 2 - destWidth / 2;

var destY = canvas.height / 2 - destHeight / 2;

context.drawImage(image02,0,0);

context0.drawImage(image02, sourceX, sourceY, sourceWidth, sourceHeight,

destX, destY, destWidth, destHeight);

};

image01.src = 1.jpg;

image02.src = 1.jpg;

};

/script

/head

body

canvas id=myCanvas width=1024 height=400

/canvas

canvas id=mc width=578 height=400

/canvas

/body/html

取消

评论