Question

我需要自动拦截并更改字体，并通过canvas.dataToUrl（）返回画布数据网址

因此，每当调用toDataURL时，它将字体大小更改0.01，然后返回toDataURL


<script>

Object.defineProperty(HTMLCanvasElement, 'toDataURL', {
    //Change Font and return the toDataURL
    //this.font = this.font + 0.01
    //return toDataURL
  });

const canvas = document.createElement("canvas");
canvas.width = 280;
canvas.height = 60;
canvas.style.display = "none"
const context = canvas.getContext("2d");
context.fillStyle = "rgb(102, 204, 0)";
context.fillRect(100, 5, 80, 50);
context.fillStyle = "#f60";
context.font = "16pt Arial";
context.fillText("<@nv45. F1n63r,Pr1n71n6!", 10, 40);
context.strokeStyle = "rgb(120, 186, 176)";
context.arc(80, 10, 20, 0, Math.PI, !1);
context.stroke();
const canvasValue = canvas.toDataURL();
</script>

Answer 1

<script>
    const canvas = document.createElement("canvas");
    const orgToDataURL = canvas.toDataURL.bind(canvas); //Original function
    document.body.append(canvas);
    canvas.width = 280;
    canvas.height = 60;
    const context = canvas.getContext("2d");

    function draw(font) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "rgb(102, 204, 0)";
        context.fillRect(100, 5, 80, 50);
        context.fillStyle = "#f60";
        context.font = font;
        context.fillText("<@nv45. F1n63r,Pr1n71n6!", 10, 40);
        context.strokeStyle = "rgb(120, 186, 176)";
        context.arc(80, 10, 20, 0, Math.PI, !1);
        context.stroke();
    }
    draw("16px Arial");

    canvas.toDataURL = function() { //Overwrite function
        draw((parseFloat(context.font) + 0.1) + "px Arial");
        return orgToDataURL();
    };

    setInterval(function() {
        console.log(canvas.toDataURL());
    }, 500);
</script>

拦截和更改画布字体

1 个答案: