Computer-Ag am WvS Blog der Computer-AG am Werner von Siemens Gymnasium Berlin

Michael ist da, Morten und Angelo. Wir versuchen, Schneeflocken mit Canvas zu machen. Robert baut mit Canvas eine Schneeflocke. S.a. http://localhost/draw_circles.js.html bzw. http://stackoverflow.com/questions/11450030/moving-text-inside-canvas-using-html5. Angelo und Michael machen was mit Logisim.

   
  
 HTML 5 Animated Text
    <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
<script type="text/javascript">
        var context;
        var text = "";
        var textDirection ="";

        window.onload = function()
        {
        DB=document.getElementsByTagName("body")[0]
       cvs = document.createElement("canvas");
       div = document.createElement("div");
       div.innerHTML = "***";
       DB.appendChild(div);
       DB.appendChild(cvs);
        //~ cvs = document.getElementById("cvs");
        height = screen.height;
        width = screen.width;
        cvs.height = height;
        cvs.width  = width;
            context = cvs.getContext("2d");      
    startY = 5
        startX = 580;
        interval = 50;
        pixelPerMove = 1;
        sinFactor = 5/2;
        textYFactor = 0.5;
            text = "*"; 
            snowFont = '30px _sans';
            snowColor = '#FF0000';
            //~ context.textBaseline = 'top';
        fillColor = '#2fa';
        
    textYpos = startY;
    textXpos = startX;
    textXrunner = 0; 
    textXincrement = 3;
     canvasDrawHeight = height/2;   
        setInterval("animate()", interval);


        //~ alert(height);
        };  

        function animate() {            
            // Clear screen
            context.clearRect(0, 0, width, height);
            context.globalAlpha = 1;
            context.fillStyle = fillColor;
            context.fillRect(0, 0, width, height);    

            var metrics = context.measureText(text);            
        var textWidth = metrics.width;

            //~ if (textDirection == "down") {
                textYpos += pixelPerMove;
        textXpos = textXpos + sinFactor*Math.sin(textYFactor*textYpos);

                if (textYpos > canvasDrawHeight - textWidth) {
                    //textDirection = "left";
                    textYpos  = startY;
                }
            //~ }
            //~ else {
                //~ textYpos -= 10;

                //~ if (textYpos < 10) {
                    //~ textDirection = "down";
                //~ }                    
            //~ }

            context.font = snowFont;
            context.fillStyle = snowColor;
            //~ context.textBaseline = 'top';
            context.fillText  ( text, textXpos, textYpos);    
          }    
          </script>
      
         <!--

<div id="page">
            <canvas id="cvs" width="600" height="600">
               Your browser does not support the HTML 5 Canvas.
            </canvas>
</div>


     -->