我的代码中有一些画布。所有这些都像一块黑板,这些画布让我可以在图像上绘图,但是当我尝试在设备中绘图时,什么也没有发生。这是我所有的代码:
let configureCanvas = canvas => {
let ctx = canvas.getContext("2d");
let painting = canvas.parentNode;
let paintStyle = getComputedStyle(painting);
if(canvas == document.getElementById("pizarra-musculos")) {
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
function myFunction(x) {
if (x.matches) { // If media query matches
canvas.width = "350";
canvas.height = "350";
} else {
canvas.width = "500";
canvas.height = "500";
}
}
}else{
canvas.width = "350";
canvas.height = "350";
}
let mouse = {
x: 0,
y: 0
};
canvas.ontouchstart = function(e){
var touches = e.touches || [];
var touch = touches[0] || {};
}
canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop
}, false);
if(canvas == document.getElementById("pizarra-musculos")) {
//Rojo Claro
ctx.lineWidth = 12;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'rgba(255, 8, 53, 0.02)';
document.getElementById("btnRojoClaro").addEventListener("click", ()=>{
//Rojo Claro
ctx.lineWidth = 12;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'rgba(255, 8, 53, 0.02)';
});
document.getElementById("btnVerde").addEventListener("click", ()=>{
//Rojo Claro
ctx.lineWidth = 4;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#249120';
});
document.getElementById("btnRojo").addEventListener("click", ()=>{
//Rojo Claro
ctx.lineWidth = 4;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#ff0000';
});
document.getElementById("btnNegro").addEventListener("click", ()=>{
//Negro
ctx.lineWidth = 4;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
});
document.getElementById("btnAzul").addEventListener("click", ()=>{
//Azul
ctx.lineWidth = 4;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#1e5085';
});
}else{
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#e34f54';
};
canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false)
}, false);
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
canvas.nextElementSibling.addEventListener('click', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
}
PD:我在 mozila 开发者身上了解了触摸屏,但我不能在设备上做这个画布的功能......感谢了解我的问题。
答案 0 :(得分:0)
在javascript中,你可以添加监听器!这意味着当监听器被激活时会监听一些东西并执行代码!
比如,如果你在html中声明<button id="mybutton"></button>
在js中,你可以用document.getElementById("mybutton")
来检索这个按钮,这样你就可以操作元素本身,值,返回,动作等... ,
让我们存储这个元素 var button = document.getElementById("mybutton")
现在 console.log(button)
会显示这个元素,很酷吧?
在这个按钮上你可以添加监听器,例如onClick,当按钮被点击时将执行一个函数
button.addEvenListenner("onClick", my_function)
所以现在当您点击按钮时,您将执行 my_function(当然您需要创建 my_function)
但在您的情况下,您想要获得鼠标移动或有人在手机上使用手指时的 eventListenner!
您已经做到了,例如使用“mousemove”!或“鼠标”等... 桌面是手机,反之亦然! 你的手机上没有鼠标你有你的手指,所以当有人触摸屏幕时需要有一个监听器!
这就是'touchstart'事件监听器的用处,当你触摸屏幕时,你可以调用一个函数来做任何你想做的事情!
对于你的项目来说,这四个监听器已经足够了,你为什么会问? 'touchstart' 告诉您何时触摸屏幕 'touchend' 告诉您何时将手指从屏幕上移开 'touchmove' 告诉您何时在屏幕上拖动手指(touchstart 和 touchmove 不是一回事!) 'touchcancel' 告诉你什么时候取消(老实说我不知道,我猜你不需要它)
现在你需要将你的监听器添加到你的画布中
var canvas = document.getElementById("pizarra-musculos")
然后你添加你的监听器
canvas.addEventListener("touchstart", handleStart);
canvas.addEventListener("touchend", handleEnd);
canvas.addEventListener("touchmove", handleMove);
现在,当使用这 3 个侦听器之一时,将调用它们旁边的函数! 因此,您可以在这些函数中执行任何您想要的操作
function handleMove(e) {
// Cache the client X/Y coordinates
var clientX = e.touches[0].clientX;
var clientY = e.touches[0].clientY;
}
通过这段代码,您可以跟踪屏幕手指的 x 和 y,尝试每个侦听器以了解它们何时被调用等。将一些 console.log 打印出值,您将做起来不难希望对你有帮助