HTML触摸正方形变色,使用触摸事件在HTML5画布上绘制正方形(Draw a Square on the HTML5 Canvas With Touch Events)...
使用触摸事件在HTML5画布上绘制正方形(Draw a Square on the HTML5 Canvas With Touch Events)
我有一个问题，我试图用触摸事件在画布上画一个正方形，它不工作，有人可以帮我弄清楚为什么？
这是我的代码到目前为止：
JAVASCRIPT：
// "Draw Rectangle" Button
function rect(){
var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false;
function init() {
canvas.addEventListener("touchstart", touchHandler, false);
canvas.addEventListener("touchmove", touchHandler, false);
canvas.addEventListener("touchend", touchHandler, false);
}
function touchHandler(event) {
if (event.targetTouches.length == 1) { //one finger touche
var touch = event.targetTouches[0];
if (event.type == "touchstart") {
rect.startX = touch.pageX;
rect.startY = touch.pageY;
drag = true;
} else if (event.type == "touchmove") {
if (drag) {
rect.w = touch.pageX - rect.startX;
rect.h = touch.pageY - rect.startY ;
draw();
}
} else if (event.type == "touchend" || event.type == "touchcancel") {
drag = false;
}
}
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
}
HTML5：
Rectangle
再次感谢Wardenclyffe
I have a problem, I'm trying to draw a square on the canvas with the use of touch event and it not working, can someone help me figure out why?
Here's my code so far:
JAVASCRIPT:
// "Draw Rectangle" Button
function rect(){
var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false;
function init() {
canvas.addEventListener("touchstart", touchHandler, false);
canvas.addEventListener("touchmove", touchHandler, false);
canvas.addEventListener("touchend", touchHandler, false);
}
function touchHandler(event) {
if (event.targetTouches.length == 1) { //one finger touche
var touch = event.targetTouches[0];
if (event.type == "touchstart") {
rect.startX = touch.pageX;
rect.startY = touch.pageY;
drag = true;
} else if (event.type == "touchmove") {
if (drag) {
rect.w = touch.pageX - rect.startX;
rect.h = touch.pageY - rect.startY ;
draw();
}
} else if (event.type == "touchend" || event.type == "touchcancel") {
drag = false;
}
}
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
}
HTML5:
Rectangle
Thanks again, Wardenclyffe
原文：https://stackoverflow.com/questions/10920665
更新时间：2019-11-25 18:11
最满意答案
在Chrome中进行测试，使用模拟触摸事件与此jsFiddle一起工作问题似乎是您绑定您的点击事件的方式。 我刚刚使用jQuery。
Tested in Chrome with emulated touch events works with this jsFiddle The problem seems to be the way you bind your click event. I just used jQuery.
相关问答
在Chrome中进行测试，使用模拟触摸事件与此jsFiddle一起工作问题似乎是您绑定您的点击事件的方式。 我刚刚使用jQuery。 或者没有jQuery： 只是一个普通的addEventListener Tested in Chrome with emulated touch events works with this jsFiddle The problem seems to be the way you bind your click event. I just used jQuery.
...
一个基本的例子是使用getImageData ： http ： //jsfiddle.net/eGjak/60/ 。 var ctx = $('#cv').get(0).getContext('2d');
for(var i = 0; i < 30; i++) {
for(var j = 0; j < 30; j++) {
ctx.fillStyle = 'rgb(' +
((i/30*255)|0) + ',' +
(
...
抱歉，我无法让您的任何代码在3种主流浏览器中运行。 这是画布上“铅笔”绘制的基本策略： 在mousedown处理程序中： - 当鼠标停止时保存鼠标的lastX和lastY位置 - 设置一个标志以指示鼠标已关闭 在mousemove处理程序中： - 如果mousedown标志为false，则不执行任何操作。 - 如果mousedown标志为真： ----从lastX / lastY到当前鼠标x / y画一条线 ----将lastX / lastY设置为当前鼠标x / y 在mouseup和mouse
...
#canvasSignature
{
width: 100%;
height: 100%;
background-color: #F0F0F0;
border: 1px solid Black;
cursor: crosshair;
}
这不好！ 根据经验，您永远不想更改画布的CSS宽度/高度。 你实际上是在拉伸整个屏幕的尺寸为300x150的画布。 这可能是99％的鼠标问题的根源。 原因似乎在y方向上很好是纯粹的巧合：画布默认为300x150，你有一个高150的d
...
首先，组合流，以便您拥有代表单个拖动的事件流。 var drag = mouseDown.first().concat(mouseMove.takeUntil(mouseUp));
接下来，将此事件流投影到previous,current元组流中。 var moves = drag
.scan({}, function(acc, x) {
return { previous: acc.current, current: x };
})
.skip(1);
...
您可以使用直线和二次曲线绘制弯头连接器以弯曲肘部。 例如，你可以在画布的左上角绘制一个从[x：10，y：100]到[x：75，y：20]并且角半径为12的肘部，如下所示： // top-left elbow from 10/100 to 75,20 with corner radius 12
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(10,20+12);
ctx.quadraticCurveTo( 10,20, 10+12,20 );
ctx.
...
勾选+ 1到PitaJ和David Starkey - 他们是对的。 最简单/最有效的解决方案是修改光标本身。 如上所述，您甚至可以为光标执行自定义图像以进行颜色更改。 但是如果你绝对需要对齐网格，那么你必须使用像分层光标画布这样的东西。 没有办法强制用户的光标进入网格对齐。 (想想会导致的恶作剧！) 1号和3号都可以使用。 我会自己去3号。 然而，“最好的”取决于你。 Checkmark+1 to PitaJ and David Starkey--they are correct. The si
...
使用精灵的游戏， 纹理多边形的3D游戏， 图像编辑功能， 实时裁剪和缩放， 图像过滤器实时... 如果您只是使用画布来加载图像，那么绝对没有收益会有很多工作，因为您实际上必须将图像加载到img元素或Image()对象中，然后才能使用它在画布上 。 Games which use sprites, 3D games with textured-polygons, Image-editing functionality, Cropping and scaling in real-time, Image
...
您的代码在JSfiddle中运行得很好： http://jsfiddle.net/jXv83/ 我有一种感觉， square()永远不会被调用，所以你在那里的代码永远不会运行... Your code works just fine in JSfiddle: http://jsfiddle.net/jXv83/ I have a feeling that square() is never getting called so the code you have up there is never
...
只需替换它： ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
ctx.clearRect(0, 0, canvas.width, canvas.height);
用这样的东西： ctx.fillLine(rect.startX, rect.startY, rect.w, rect.h);
ctx.clearLine(0, 0, canvas.width, canvas.height);
这当然不是100％有效的代码，但这个概念
...