小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2016年 > 10月 > 19日

HTML5のCanvasをトライ。

2016年10月19日

Logging


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

 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2016年10月19 06:00日

タグ

AM,