記録

HTML5のCanvasをトライ。

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

活動支援よろしくお願いします

SNSで繋がるという意識。前のページ

先のこと、未来の自分のために出来ること。次のページ

関連記事

  1. 記録

    いらないと思うこと。

    いらない物が溢れているのですが捨てられないです。特に本が多いですね…

  2. 記録

    睡眠時間。

    だいたい4時か5時起床で7時間から8時間の睡眠をとっています。規則…

  3. 記録

    なんちゃってIT戦記をぼちぼちぐちぐち。

    権力者に歯向かう馬鹿なZIPです。「お前が言うな」「お前は社長か!…

  4. 記録

    SNSの普及で他人が近く感じる人が増えている。

    SNSの普及で他人が近く感じる人が増えている。原因は簡単にいえば一…

  5. 記録

    「パッと咲いて散って灰に」を聴きながら妄想を膨らましてみました。

    おはよう御座います。この頃、思うのですがヒットする曲や聴いて…

2016年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

カテゴリー

PAGE TOP