|
|
@@ -0,0 +1,49 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <style>
|
|
|
+ canvas {
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <canvas id="myCanvas" width="1500" height="200"></canvas>
|
|
|
+ <script>
|
|
|
+ const canvas = document.getElementById("myCanvas");
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+
|
|
|
+ // Input stringhe
|
|
|
+ const str1 = "Se ni’ mondo esistesse un po’ di bene e ognun si honsiderasse suo fratello ci sarebbe meno pensieri e meno pene e il mondo ne sarebbe assai più bello";
|
|
|
+ const str2 = "fratello";
|
|
|
+
|
|
|
+ // Colori
|
|
|
+ ctx.font = "20px Arial";
|
|
|
+ ctx.fillStyle = "black";
|
|
|
+
|
|
|
+ // Scrivi la prima stringa
|
|
|
+ ctx.fillText(str1, 10, 50);
|
|
|
+
|
|
|
+ // Cerca la seconda stringa nella prima
|
|
|
+ const startIndex = str1.indexOf(str2);
|
|
|
+ const endIndex = startIndex + str2.length;
|
|
|
+
|
|
|
+ // Colore
|
|
|
+ ctx.fillStyle = "brown";
|
|
|
+ ctx.fillRect(
|
|
|
+ ctx.measureText(str1.substring(0, startIndex)).width + 10,
|
|
|
+ 32,
|
|
|
+ ctx.measureText(str2).width,
|
|
|
+ 20
|
|
|
+ );
|
|
|
+
|
|
|
+ // Scrivi la seconda stringa nel colore
|
|
|
+ ctx.fillStyle = "black";
|
|
|
+ ctx.fillText(
|
|
|
+ str1.substring(startIndex, endIndex),
|
|
|
+ ctx.measureText(str1.substring(0, startIndex)).width + 10,
|
|
|
+ 50
|
|
|
+ );
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
