HTML5のCanvasをトライ。

20161019

Logging


会社でCanvasのことを聞かれたのだけど
さっぱりだったので触ってみた。
分かったことは、なぁなぁやなって事ぐらい。
3日ぐらい歩けば、考え方以外は「すっ」と頭から
抜けていくのだろうけれど・・・。
サンプルを載せときます・・・ちょっと誤作動します。
(ヒント、文字を入力しクリアにチェック)
https://zip358.com/tool/loop/ [サンプル]

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
        var cs = new Array();
        var ctx = new Array();
        var s1 = new Array();
        var s2 = new Array();
            $(function(){
                $("#RPlus").click(function(){
                    $("#LoopI").append('<input type="text" class="Ltext">\n\
                                        <input type="hidden" class="Lx" value="10">\n\
                                        <input type="hidden" class="Ly" value="5">\n\
                                        <input type="hidden" class="Lxziku" value="1">\n\
                                        <input type="hidden" class="Lyziku" value="1">\n\
                                        <br>');
                });
                $(".Ltext").keypress(function(){
                    htm_dousa();
                });
                $("#NOBJ").click(function(){
                    if($("#NOBJ:checked").val()){
                        htm_dousa();
                    }
                });
                $("#cls").click(function(){
                    if($("#cls:checked").val()){
                        htm_dousa();
                    }
                });
            });
            function htm_dousa(){
                $(".Ltext").each(function(i) {
                    RaLeRt(this,i);
                });
            }
            function RaLeRt(obj,i){
                DRAW_mycan($(obj).val(),i);
            }
            function DRAW_mycan(mystr,i){
                if($("#NOBJ:checked").val()){
                     clearInterval(s1[i]);
                     clearInterval(s2[i]);
                     cs[i]  = null;
                     ctx[i] = null;
                     return;
                }else{
                    cs[i] = document.getElementById('mycan');
                    ctx[i] = cs[i].getContext("2d");
                    var w = cs[i].width;
                    var h = cs[i].height;
                    ctx[i].clearRect(0, 0, w, h);
                    clearInterval(s1[i]);
                    clearInterval(s2[i]);
                    s1[i] =setInterval( function(){xyz(cs[i],ctx[i],mystr,i);},1);
                    s2[i] =setInterval( function(){DRW_CLS(cs[i],ctx[i],w, h);},100);
                }
            }
            function xyz(cs,ctx,mystr,i){
                var x=0;
                var y=0;
                var x_a = 0;
                var y_a = 0;
                var xziku=0;
                var yziku=0;
                if($(".Lx").eq(i).val() < 0  || $(".Lx").eq(i).val() > 900 ){xziku = parseInt($(".Lxziku").eq(i).val()) * -1;}else{xziku = parseInt($(".Lxziku").eq(i).val());}
                if($(".Ly").eq(i).val() < 0 || $(".Ly").eq(i).val() > 700){yziku = parseInt($(".Lyziku").eq(i).val()) * -1;}else{yziku = parseInt($(".Lyziku").eq(i).val());}
                x = parseInt($(".Lx").eq(i).val()) + (10*xziku);
                y = parseInt($(".Ly").eq(i).val()) + (5*yziku);
                x_a = parseInt(x+(Math.sin(x)*100));
                y_a = parseInt(y+(Math.cos(y)*100));
                if(ctx){
                    ctx.beginPath();
                    ctx.font =  Math.floor( Math.random() * 35 ) + "px 'Hiragino Mincho Pro','MS Mincho','TakaoMincho'";
                    ctx.fillStyle = 'rgba(' + Math.floor( Math.random() * 255 ) + ','+ Math.floor( Math.random() * 255 ) +',' + Math.floor( Math.random() * 255 ) + ',0.7)';
                    ctx.fillText(mystr, x_a, y_a);
                    ctx.fill();
                }
                $(".Lx").eq(i).val(x);
                $(".Ly").eq(i).val(y);
                $(".Lxziku").eq(i).val(xziku);
                $(".Lyziku").eq(i).val(yziku);
            }
            function DRW_CLS(obj,obj2,w, h){
                if($("#cls:checked").val()){
                    if(obj2){
                        obj2.clearRect(0, 0, w, h);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="LoopI">
            <input type="text" class="Ltext"><input type="button" value="項目を増やす" id="RPlus">クリアする<input id="cls" type="checkbox" >オブジェクトNEW<input id="NOBJ" type="checkbox" ><br>
            <input type="hidden" class="Lx" value="10"><input type="hidden" class="Ly" value="5">
            <input type="hidden" class="Lxziku" value="1"><input type="hidden" class="Lyziku" value="1">
        </div>
        <div id="wrapper">
            <canvas id="mycan" width="900" height="700"></canvas>
        </div>
    </body>
</html>
<?php

 

タグ

AM,