Title: [237091] trunk/Websites/webkit.org
- Revision
- 237091
- Author
- drou...@apple.com
- Date
- 2018-10-12 16:54:17 -0700 (Fri, 12 Oct 2018)
Log Message
Add a demo for WebInspector scanvas debugging.
* demos/canvas-debugging/index.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (237090 => 237091)
--- trunk/Websites/webkit.org/ChangeLog 2018-10-12 23:52:09 UTC (rev 237090)
+++ trunk/Websites/webkit.org/ChangeLog 2018-10-12 23:54:17 UTC (rev 237091)
@@ -1,3 +1,9 @@
+2018-10-12 Devin Rousso <drou...@apple.com>
+
+ Add a demo for WebInspector scanvas debugging.
+
+ * demos/canvas-debugging/index.html: Added.
+
2018-10-08 Justin Fan <justin_...@apple.com>
WebGPU: Rename old WebGPU prototype to WebMetal
Added: trunk/Websites/webkit.org/demos/canvas-debugging/demo.html (0 => 237091)
--- trunk/Websites/webkit.org/demos/canvas-debugging/demo.html (rev 0)
+++ trunk/Websites/webkit.org/demos/canvas-debugging/demo.html 2018-10-12 23:54:17 UTC (rev 237091)
@@ -0,0 +1,85 @@
+<html>
+<body>
+<style>
+canvas {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+</style>
+<script>
+"use strict";
+
+let context = document.body.appendChild(document.createElement("canvas")).getContext("2d");
+let canvasWidth = 0;
+let canvasHeight = 0;
+
+function handleResize() {
+ canvasWidth = context.canvas.width = context.canvas.offsetWidth;
+ canvasHeight = context.canvas.height = context.canvas.offsetHeight;
+}
+handleResize();
+window.addEventListener("resize", handleResize);
+
+class Star {
+ constructor()
+ {
+ this._initialize();
+ }
+
+ draw()
+ {
+ // if (this._x > -this._s && this._x < canvasWidth + this._s && this._y > -this._s && this._y < canvasHeight + this._s) {
+ context.moveTo(this._x, this._y);
+ context.arc(this._x, this._y, this._s, 0, 2 * Math.PI);
+ // }
+
+ this._x += this._vx;
+ this._y += this._vy;
+ if (this._x > canvasWidth + this._s || this._y < -this._s)
+ this._initialize();
+ }
+
+ _initialize()
+ {
+ this._s = this._randomFromInterval(0.5, 3);
+
+ this._x = this._randomFromInterval(-canvasWidth, 0);
+ this._y = this._randomFromInterval(canvasHeight, canvasHeight * 2);
+
+ this._vx = this._randomFromInterval(0.5, 3);
+ this._vy = this._randomFromInterval(-0.5, -3);
+ }
+
+ _randomFromInterval(min, max)
+ {
+ return Math.random() * (max - min + 1) + min;
+ }
+}
+
+let stars = [];
+for (let i = 0; i < 10000; ++i)
+ stars.push(new Star);
+
+window.requestAnimationFrame(function frame(timestamp) {
+ context.fillStyle = "hsla(0, 0%, 10%, 0.5)";
+ context.fillRect(0, 0, canvasWidth, canvasHeight);
+
+ for (let i = 0; i < 10; ++i) {
+ context.beginPath();
+
+ for (let j = 0; j < stars.length / 10; ++j)
+ stars[(i * stars.length / 10) + j].draw();
+
+ context.fillStyle = "white";
+ context.fill();
+ }
+
+ window.requestAnimationFrame(frame);
+});
+
+</script>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
