14
Tôi đã tạo một ứng dụng vẽ đơn giản bằng canvas HTML5. Bạn bấm vào hai vị trí khác nhau để vẽ một đường thẳng từ điểm này sang điểm khác. Tôi cũng có hai hộp nhập văn bản, nơi bạn có thể thay đổi độ dày và màu của đường kẻ. Vấn đề là, khi tôi thay đổi màu của một dòng, nó thay đổi tất cả các dòng các đường được vẽ trước đây. Điều này cũng xảy ra khi thay đổi độ dày của đường, nhưng chỉ khi tôi vẽ một đường dày hơn trước (nếu tôi vẽ một đường mảnh hơn thì các đường khác không thay đổi).HTML5 Canvas thay đổi màu sắc của tất cả các dòng
Tôi mới sử dụng HTML5 và tất cả mọi trợ giúp đều sẽ được đánh giá cao.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas width="300" height="300" id="myCanvas"></canvas>
<br />
<input type="button" value="Enter Coordinates" onclick="enterCoordinates()"></input>
Line Width: <input type="text" id="lineWidth"></input>
Line Color: <input type="text" id="lineColor"></input>
<script type="text/javascript">
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,300,300);
function drawLine(start,start2,finish,finish2)
{
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
// optional variables
lineWidth = document.getElementById('lineWidth').value;
if (lineWidth)
{
ctx.lineWidth=lineWidth;
}
lineColor = document.getElementById('lineColor').value;
if (lineColor)
{
ctx.strokeStyle=lineColor;
}
ctx.moveTo(start,start2);
ctx.lineTo(finish,finish2);
ctx.stroke();
}
function enterCoordinates()
{
var values = prompt('Enter values for line.\n x1,y1,x2,y2','');
var start = values.split(",")[0];
var start2 = values.split(",")[1];
var finish = values.split(",")[2];
var finish2 = values.split(",")[3];
drawLine(start,start2,finish,finish2);
}
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("myCanvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
if (window.startx)
{
window.finishx = x;
window.finishy = y;
drawLine(window.startx,window.starty,window.finishx,window.finishy);
// reset
window.startx = null;
}
else
{
window.startx = x;
window.starty = y;
}
}
</script>
</body>
</html>
Đã hoạt động! Cảm ơn rất nhiều. – sc8ing