2
Я создал простое веб-приложение, использующее тэг HTML5 и тэг canvas, который позволяет рисовать вдоль линии мыши, перемещается при нажатии. Это отлично работает, когда я не использую форматирование CSS. Однако, когда я использую форматирование CSS, это не работает должным образом: линия рисуется далеко от того места, где расположена мышь. Тэг Canvas не работает, если используется форматирование CSS
context = document.getElementById('drawing').getContext("2d");
//below code to ensure compatibility with older browser by check if addEventListener is available or not
var EventUtil = {
addHandler: function(element, type, handler){ if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler; }
},
removeHandler: function(element, type, handler){ if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null; }
}
} ;
//Drawing canvas related functions
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function whenMousedown() {
var mouseX = event.pageX - this.offsetLeft;
var mouseY = event.pageY - this.offsetTop;
paint = true;
addClick(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
redraw();
};
function whenMousemove(){
if(paint){
addClick(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
redraw();
}
};
function whenMouseup(){
paint = false;
};
function whenMouseleave(){
paint = false;
};
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
// this clears the canvas and sets the arrays to null
function clearCanvas() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height) // Clears the canvas
clickX = [];
clickY = [];
clickDrag = [];
};
EventUtil.addHandler (document.getElementById('drawing'), 'mousedown', whenMousedown);
EventUtil.addHandler (document.getElementById('drawing'), 'mousemove', whenMousemove);
EventUtil.addHandler (document.getElementById('drawing'), 'mouseup', whenMouseup);
EventUtil.addHandler (document.getElementById('drawing'), 'mouseleave', whenMouseleave);
EventUtil.addHandler(document.getElementById('clearBtn'), 'click', clearCanvas) ;#container{
\t \t margin: auto;
\t \t width: 800px;
\t \t height: 605px;
\t \t border: 1px solid;
\t }
#body {
\t \t margin: 10px;
\t }
.heading {
\t \t margin: auto;
\t \t width: 455px;
color: blue;
padding-bottom: 10px;
}
#drawing {
\t \t width: 780px;
\t \t height: 500px;
\t \t border: 1px solid;
\t \t margin: auto;
\t }
#clearBtnDiv{
margin: auto;
width:80px;
}
#clearBtn{
color: purple;
font-size: large;
background-color: aqua;
width: 80px;
}<!DOCTYPE html>
<html>
<head>
\t <title> Drawing Canvas</title>
<link rel='stylesheet' type="text/css" href = 'drawingMain.css'>
</head>
<body>
<div id = 'container'>
<div id='body'>
\t <h1 class = 'heading'> Welcome to a Drawing Canvas!!</h1>
<canvas id ='drawing' >
\t A sample drawing <! this will be shown if canvas doesnt work in the browser !>
</canvas>
</div>
<div id ='clearBtnDiv'>
\t <input type="submit" value="Clear" id ='clearBtn' > </div>
</div>
<script type="text/javascript" src= 'drawing.js'> </script>
</body>
</html>
Код - @ github, поэтому поделитесь им здесь, пожалуйста. –
@ mr-alien - Done – kutuhal
Я обнаружил, что это не форматирование CSS, в основном, вызывающее эту проблему, но эта проблема была специфична для установки ** высоты ** и ** ширины ** свойства canvas. Эти свойства холста должны быть установлены ниже: canvasObject.setAttribute ('width', '475'). Кроме того, это было хорошо объяснено в другом вопросе: [Холст растянут при использовании CSS] (http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with- width-height-properties) – kutuhal