Html
Напишем код в файле 1.html
<html>
<!-- заголовок -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- страница -->
<body>
<!-- HTML canvas -->
<canvas id="canvas1" width='400px' height='300px' style='border:1px solid gray;'></canvas>
<!-- JavaScript функции -->
<script>
function MyDrawText(context, text, color, font, x, y)
{
context.font = font;
context.fillStyle = color;
context.fillText(text, x, y);
}
function MyCalculateMousePosition(canvas, event)
{
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - Math.trunc(rect.left),
y: event.clientY - Math.trunc(rect.top)
};
}
</script>
<!-- главный код -->
<script>
<!-- context для рисования -->
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt)
{
<!-- очищаем все на canvas -->
context.clearRect(0, 0, canvas.width, canvas.height);
<!-- получаем позицию мыши -->
var mousePos = MyCalculateMousePosition(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
MyDrawText(context, message, "black", "18pt Calibri", 0, 20);
}, false);
</script>
</body>
</html>
Ваши Отзывы ... комментарии ...