Html
<style>
* {
touch-action: manipulation; // double click not zoom on phone
}
</style>
Напишем код чтобы рисовались линии по нажатию мышкой на компьютере или тыкаем пальцем на телефоне:
Html
<html>
<head>
<meta charset="utf-8">
<title>My canvas</title>
</head>
<body>
<center>
<canvas id='myCanvas1' style='background-color:white; border:1px solid black;' width='600px' height='400px'/>
</center>
</body>
<script>
var myCanvas = document.getElementById("myCanvas1");
myCanvas.onmousedown = MyClickCanvas;
var context = myCanvas.getContext('2d');
var lastX = null;
var lastY = null;
function MyClickCanvas(e)
{
const rect = myCanvas.getBoundingClientRect();
var x = e.clientX - rect.x;
var y = e.clientY - rect.y;
if (lastX!=null && lastY!=null)
MyDrawLine(context, 'black' /*color*/, 2 /*line width*/, lastX, lastY, x, y);
lastX = x;
lastY = y;
}
function MyDrawLine(context, lineColor, lineWidth, x1, y1, x2, y2)
{
context.resetTransform();
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.stroke();
}
</script>
</body>
</html>
Пример смотрим, тестируем
При двойном нажатии на телефоне размер страницы увеличивается:
Html
<style>
* {
touch-action: manipulation; // double click not zoom on phone
}
</style>
Html
<html>
<head>
<meta charset="utf-8">
<title>My canvas</title>
</head>
<style>
* {
touch-action: manipulation; // double click not zoom on phone
}
</style>
<body>
<center>
<canvas id='myCanvas1' style='background-color:white; border:1px solid black;' width='600px' height='400px'/>
</center>
</body>
<script>
var myCanvas = document.getElementById("myCanvas1");
myCanvas.onmousedown = MyClickCanvas;
var context = myCanvas.getContext('2d');
var lastX = null;
var lastY = null;
function MyClickCanvas(e)
{
const rect = myCanvas.getBoundingClientRect();
var x = e.clientX - rect.x;
var y = e.clientY - rect.y;
if (lastX!=null && lastY!=null)
MyDrawLine(context, 'black' /*color*/, 2 /*line width*/, lastX, lastY, x, y);
lastX = x;
lastY = y;
}
function MyDrawLine(context, lineColor, lineWidth, x1, y1, x2, y2)
{
context.resetTransform();
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.stroke();
}
</script>
</body>
</html>
Ваши Отзывы ... комментарии ...