<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
<img id="img" src="https://img-blog.csdnimg.cn/2022010617413179391.png" />
<canvas id="tutorial" width="500" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
<img id="img2" src="https://img-blog.csdnimg.cn/2022010617413133672.png" >
<img id="img1" src="https://img-blog.csdnimg.cn/2022010617413179391.png" />
<canvas id="tutorials" width="500" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
<script type="text/javascript">
var img = document.getElementById('img');
img.onclick = function() {
btnCan(img)
}
var x =0;
var y =0;
function btnCan(img){
x +=img.width;
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.drawImage(img,x,y)
}
function getimgs(){
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
// var _width=parseInt(img1.width()/2.3);
// var _height=parseInt(img2.height()/2.3);
var canvas = document.getElementById("tutorials");
var context = canvas.getContext("2d");
context.drawImage(img2, 0, 0);
context.drawImage(img1,180, 200);
}
getimgs();
// getMousePos(event);
// function getMousePos(event) {
// var e = event || window.event;
// var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
// var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
// var x = e.pageX || e.clientX + scrollX;
// var y = e.pageY || e.clientY + scrollY;
// //alert('x: ' + x + '\ny: ' + y);
// return { 'x': x, 'y': y };
// }
</script>
</body>
</html>
3113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
