Tweet
Hallo!
Ich hab aus diesem Buch hier https://www.apress.com/9781430227908 mir mal ein Beispiel angeguckt und versuch grad, es zu verstehen. Der Sourcecode ist auf der Seite frei verfügbar, deswegen geh ich mal davon aus, dass ich das hier posten darf:
Ich hab mit Folgendem Probleme:
1. was genau bewirkt das
in der Funktion sample()? - Wenn ich da irgendwas Anderes als -1 reinschreibe, beginnt die Animation sofort im oberen linken Eck des canvas..
2. Ich kapier den Rückgabewert der getColor-Funktion nicht. Die bekommt als Wert den Radius übergeben (drawPoint()) und nutzt das dann, um die Farben auszuwählen. Aber welchen Wert hat der Wert, der in Math.floor steht?
3. Welchen Wert hat der Parameter radius in der drawPoint()-Funktion?
4. Das points[]-Array verstehe ich auch nicht. Was ist das für eine Konstruktion? points[[x,y]] und wieso kann man da einfach ++inkrementieren?
Soweit erstmal, vielen Dank schon mal!
Ich hab aus diesem Buch hier https://www.apress.com/9781430227908 mir mal ein Beispiel angeguckt und versuch grad, es zu verstehen. Der Sourcecode ist auf der Seite frei verfügbar, deswegen geh ich mal davon aus, dass ich das hier posten darf:
Code:
<!DOCTYPE html>
<html>
<title>HTML5 Canvas Example</title>
<style type="text/css">
@import url("styles.css");
<!-- #heatmap {
background-image: url("mapbg.jpg");
} -->
</style>
<h1>HTML5 Canvas Example</h1>
<p id="support">Your browser supports HTML5 Canvas!</p>
<h2>Heatmap </h2>
<canvas id="heatmap" class="clear" style="border: 1px solid ; " height="300" width="300"> </canvas>
<button id="resetButton">Reset</button>
<script>
function log() {
console.log(arguments);
}
var points = {};
var SCALE = 3;
var x = -1;
var y = -1;
function loadDemo() {
document.getElementById("resetButton").onclick = reset;
canvas = document.getElementById("heatmap");
context = canvas.getContext('2d');
context.globalAlpha = 0.2;
// set the canvas to have a high transparency value for its global drawing operations
context.globalCompositeOperation = "lighter";
// set the composite mode to cause new draws to lighten the underlying pixels rather than replace them
function sample() {
if (x != -1) {
addToPoint(x,y)
}
setTimeout(sample, 100);
}
canvas.onmousemove = function(e) {
x = e.clientX - e.target.offsetLeft;
y = e.clientY - e.target.offsetTop;
addToPoint(x,y)
}
sample();
}
function reset() {
points = {};
context.clearRect(0,0,300,300);
x = -1;
y = -1;
}
// a lookup table of colors to use when drawing heat on the canvas
function getColor(intensity) {
var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
return colors[Math.floor(intensity/2)];
}
// Whenever the mouse moves or hovers over an area of the canvas, a point is drawn. The point grows
// in size (and brightness) the longer the mouse stays in the immediate area.
function drawPoint(x, y, radius) {
context.fillStyle= getColor(radius);
radius = Math.sqrt(radius)*6;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, true)
context.closePath();
context.fill();
}
function addToPoint(x, y) {
x = Math.floor(x/SCALE);
y= Math.floor(y/SCALE);
if (!points[[x,y]]) {
points[[x,y]] = 1;
} else if (points[[x,y]]==10) {
return
} else {
points[[x,y]]++;
}
drawPoint(x*SCALE,y*SCALE, points[[x,y]]);
}
window.addEventListener("load", loadDemo, true);
</script>
</html>
1. was genau bewirkt das
Code:
if( x != -1)
2. Ich kapier den Rückgabewert der getColor-Funktion nicht. Die bekommt als Wert den Radius übergeben (drawPoint()) und nutzt das dann, um die Farben auszuwählen. Aber welchen Wert hat der Wert, der in Math.floor steht?
3. Welchen Wert hat der Parameter radius in der drawPoint()-Funktion?
4. Das points[]-Array verstehe ich auch nicht. Was ist das für eine Konstruktion? points[[x,y]] und wieso kann man da einfach ++inkrementieren?
Soweit erstmal, vielen Dank schon mal!
...
Comment