Question

大家好我在javascript中有一个很好的代码，它在HTML5 Canvas上写了一些字符，我想要计算画布上的字符。如果画布计数超过10.000个字符，我希望脚本清除间隔。这是我的代码：

    <script>
        window.onload=function(){
        var lin2=200; // sets the vertical size to 200
        setInterval(function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="black"; //sets the stroke color
ctx.font="20px Georgia"; //set's up the font type and size
ctx.fillStyle="lime";
ctx.fillText(Math.floor(Math.random() * (1 - 0 + 1)) + 0,Math.floor(Math.random() * (1000 - 1 + 1)) + 1,lin2); //return's random 1 or 0 with random width and lin2 width
ctx.beginPath();
ctx.moveTo(500,0);
ctx.shadowColor="blue"; // not necessary
ctx.stroke();
var url = c.toDataURL();document.getElementById("mywork").innerHTML="<img src=\""+url+"\"></img>"; // draw it on the canvas
lin2++;  //lin2 +1
if(lin2 > 1200){ //if the vertical height equals the height of the canvas set the vertical heigth to zero.
lin2=0;
}
},0.1); //time delay
        };
    </script>

Answer 1

绘制后，您无法在画布中计算文本。

你可以做的是自己计算，例如......：

var totalText = 0;
window.onload = function() {
    var lin2=200; // sets the vertical size to 200
    setInterval(function(){
        var txt = (Math.floor(Math.random() * (1 - 0 + 1)) + 0,Math.floor(Math.random() * (1000 - 1 + 1)) + 1,lin2);
        totalText += txt.length;
        // some more of your code
        ctx.fillText(txt);
    // …

作为旁注，如果你想清除间隔，你必须把它存放在某个地方。

Answer 2

一种方法是使用requestAnimationFrame和一个计数器来限制执行的循环次数：

enter image description here

以下是带注释的代码和演示：http://jsfiddle.net/m1erickson/P44MV/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // animation related variables
    var counter=0;
    var lastTime;
    var lin2=200;
    var maxLoops=canvas.height*2;
    var duration=0.20;

    // set the styles once before animating
    ctx.strokeStyle="black";
    ctx.font="20px Georgia";
    ctx.fillStyle="lime";

    // start the animation loops
    requestAnimationFrame(animate);

    function animate(t){

        // exits after the doing the desire count of loops
        if(counter++ > maxLoops){return;}

        // we're not done, so request another loop
        requestAnimationFrame(animate);

        // calculate  elapsed time since the last loop
        if(!lastTime){lastTime=t;}
        var elapsedTime=t-lastTime;
        // exit if sufficient elapsed time hasn't occurred.
        if(elapsedTime<duration){return;}
        // reset the lastTime for the next loop
        lastTime=t;

        // draw a random 0 or 1 at a random X on the canvas
        var x=Math.random()*canvas.width-5;
        ctx.fillText( parseInt(Math.random()+0.50), x, lin2);

        // increment the loop counter and lin2
        counter++;
        lin2++;
        // reset lin2 if it exceeds the canvas height
        if(lin2>canvas.height){lin2=10;}

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=650></canvas>
</body>
</html>

我想要计算我放在画布上的角色

2 个答案: