HTML5 Canvas - IT书包

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="yinq">
    <title></title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
</head>

<body>
<div class="canvas-coordinates-demo"><canvas id="myCanvas"></canvas><br><strong class="canvas-coordinates">(0,0)</strong></div>
<script type="text/javascript" src="http://www.itshubao.com/static/js/jquery.min.js"></script>
</body>
</html>

CSS

.canvas-coordinates-demo {
    margin: 30px 30px 10px;
    padding: 40px 0 20px 44px;
    background: url(http://www.itshubao.com/uploads/images/20260525/4504f104835fe3eca37c2883dbdc546c.png) no-repeat 0 0;
}
.canvas-coordinates-demo canvas {
    width: 300px;
    height: 125px;
    border: 1px solid #ddd;
}

JavaScript

$("#myCanvas").mousemove(function(event){            
	var relX = Math.round(event.pageX - $(this).offset().left);
	var relY = Math.round(event.pageY - $(this).offset().top);
	var relCoords = "(" + relX + "," + relY + ")";
	$(".canvas-coordinates").text(relCoords);
});