我有一个JavaScript程序，它使用画布绘制：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: [],
letztePunkte: [],
serverPunkte: 0,
vomServer: []
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = [];
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
我希望它是一个应用程序，可以在服务器客户端应用程序中用于多个客户端。因此，我正在使用nodejs并尝试将我绘制的每个点的统计信息以数组的形式发送，以便另一个客户端可以获取每个点的这些信息并将其准确地绘制在他的浏览器上。
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = [];
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^\/static\/([^\/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^\/data\/(\w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^\/\w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
我如何使另一个浏览器绘制以数组“ liste”发送的这些点？
答案 0 :(得分：0)
这是我的答案，真的很简单：
a²+b²=c² |Math.sqrt()
a+b=c |-b |-c
a-c=b