Html Canvas注册鼠标事件代码实例讲解
程序员文章站
2022-11-20 15:24:08
Canvas鼠标事件有以下几个：
mousedown 鼠标按下
mouseup 鼠标离开屏幕mousemove 鼠标移动
mouseout 鼠标离开当前Canvas界面
下...
Canvas鼠标事件有以下几个：
mousedown 鼠标按下
mouseup 鼠标离开屏幕mousemove 鼠标移动
mouseout 鼠标离开当前Canvas界面
下面getLocation方法获取鼠标点击的坐标。
<%--
Created by IntelliJ IDEA.
User: wzj
Date: 2016/10/8
Time: 21:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Index</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid red;"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('canvas')
, g = canvas.getContext('2d')
//注册事件
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener("mouseup",doMouseUp,false);
canvas.addEventListener("mousemove",doMouseMove,false);
canvas.addEventListener("mouseout",doMouseOut,false);
//鼠标按下响应事件
function mousedown(event) {
var x = event.pageX;
var y = event.pageY;
var loc = getLocation(x,y)
}
function doMouseUp(event) {
var x = event.pageX;
var y = event.pageY;
var loc = getLocation(x,y)
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var loc = getLocation(x,y)
}
function doMouseOut(event) {
var x = event.pageX;
var y = event.pageY;
var loc = getLocation(x,y)
}
//获取当前鼠标点击的坐标
function getLocation(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: (x - bbox.left) * (canvas.width / bbox.width),
y: (y - bbox.top) * (canvas.height / bbox.height)
};
}
</script> 上一篇： Canvas在页面画出各种图形的方法
下一篇： 超强组合搞定Delphi程序