Computer Graphics & Visualization @ufrj.br
<canvas width=100 height=100 style="border:1px solid gray">
{
const canvas = htl.html`<canvas width=100 height=100 style="border:1px solid gray">`;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 40, 40);
return canvas;
}
{
const canvas = htl.html`<canvas width=100 height=100 style="border:1px solid gray">`;
const ctx = canvas.getContext("2d");
const imageData = new ImageData(100, 100);
for (let i = 0; i < imageData.data.length; i++)
imageData.data[i] = i % 4 == 3 ? 255 : Math.random() * 255;
ctx.putImageData(imageData, 0, 0);
return canvas;
}
{
const canvas = htl.html`<canvas width=100 height=100 style="border:1px solid gray">`;
const ctx = canvas.getContext("2d");
const desenho = (n) => {
ctx.clearRect(0, 0, 100, 100);
ctx.lineWidth = 3;
for (let i = 0; i < n; i++) {
const ang = (i / n) * Math.PI * 2;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50 + 50 * Math.cos(ang), 50 + 50 * Math.sin(ang));
ctx.stroke();
}
};
for (let quadro = 0; ; quadro++) {
// Um quadro
const n = Math.round(Math.sin(quadro / 20) * 20 + 21);
desenho(n);
yield canvas; // <- Célula geradora de canvas
}
}
{
const canvas = htl.html`<canvas width=100 height=100 style="border:1px solid gray">`;
const ctx = canvas.getContext("2d");
const desenho = (n) => {
ctx.clearRect(0, 0, 100, 100);
ctx.lineWidth = 3;
for (let i = 0; i < n; i++) {
const ang = (i / n) * Math.PI * 2;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50 + 50 * Math.cos(ang), 50 + 50 * Math.sin(ang));
ctx.stroke();
}
};
desenho(10);
canvas.onmousemove = (evento) => {
const n = Math.round(evento.offsetX / 5);
desenho(n);
};
return canvas;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
