HTML5 Canvas电脑鼠标与电脑键盘恶性事件demo示例

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

演试HTML5 Canvas电脑鼠标恶性事件,获得Canvas目标上的电脑鼠标座标,演试电脑键盘恶性事件根据电脑键盘操纵Canvas上目标挪动。

Canvas目标适用全部的JavaScript的电脑鼠标恶性事件,包含电脑鼠标点一下(MouseClick), 电脑鼠标按下(Mouse Down), 电脑鼠标抬起(Mouse Up),电脑鼠标挪动( Mouse Move)对Canvas加上电脑鼠标恶性事件方法有两种,1种方法是根据API来进行:

拷贝编码
编码以下:

// mouse event
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false);
canvas.addEventListener('mouseup', doMouseUp, false);
此外1种方法在JavaScript中称为反方式:


拷贝编码
编码以下:

canvas.onmousedown = function(e){
}
canvas.onmouseup = function(e){
}
canvas.onmousemove = function(e){
}

获得电脑鼠标在Canvas目标上座标:
因为Canvas上电脑鼠标恶性事件中不可以立即获得电脑鼠标在Canvas的座标,所获得的全是根据全部
显示屏的座标。因此根据电脑鼠标恶性事件e.pageX与e.pageY来获得电脑鼠标部位,随后根据
Canvas. getBoundingClientRect()来获得Canvas目标相对性显示屏的相对性部位,根据测算

获得电脑鼠标在Canvas的座标,编码以下:

拷贝编码
编码以下:

function getPointOnCanvas(canvas, x, y) {
var bbox =canvas.getBoundingClientRect();
return { x: x- bbox.left *(canvas.width / bbox.width),
y:y - bbox.top * (canvas.height / bbox.height)
};
}

电脑键盘恶性事件:
HTML5 Canvas自身不适用电脑键盘恶性事件监视与获得,常见的有两种方式来处理这个难题:

1:根据windows目标来完成Canvas电脑键盘恶性事件监视与解决
// key event - use window as object
window.addEventListener('keydown', doKeyDown,true);

2:根据在Canvas目标上加上其它适用电脑键盘恶性事件的DOM元素完成电脑键盘恶性事件适用

拷贝编码
编码以下:

<canvas id="event_canvas"tabindex="0"></canvas>
// key event - use DOM element asobject
canvas.addEventListener('keydown', doKeyDown,true);
canvas.focus();

在其中tabindex为HTML5 DOM元素,适用电脑键盘恶性事件。
演试,1个能够依据电脑键盘左右上下挪动的矩形框块:
 
1个详细的电脑鼠标与电脑键盘恶性事件演试编码以下:

拷贝编码
编码以下:

var tempContext = null; // global variable 2d context
var started = false;
var mText_canvas = null;
var x = 0, y =0;
window.add
window.onload = function() {
var canvas = document.getElementById("event_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
tempContext = canvas.getContext("2d");
tempContext.fillStyle="blue";
x = canvas.width/2;
y = canvas.height/2;
tempContext.fillRect(x, y, 80, 40);
// key event - use DOM element as object
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// key event - use window as object
window.addEventListener('keydown', doKeyDown, true);
// mouse event
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
function doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // up arrow and W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // right arrow and D
clearCanvas();
x = x + 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // down arrow and S
clearCanvas();
y = y + 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // left arrow and A
clearCanvas();
x = x - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
}
function clearCanvas() {
tempContext.clearRect(0, 0, 500, 500)
}
function doMouseDown(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (started) {
tempContext.lineTo(loc.x, loc.y);
tempContext.stroke();
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (started) {
doMouseMove(event);
started = false;
}
}

HTML一部分:

拷贝编码
编码以下:

<body>
<h1>HTML Canvas Event Demo - By Gloomy Fish</h1>
<pre>Press W, A, S, D keys to move</pre>
<div id="my_painter">
<canvas id="event_canvas" tabindex="0"></canvas>
</div>
</body>
上一篇:带你了解HTML5中的WebSocket 返回下一篇:没有了