# HTML5のCanvasをトライ。

[![](https://zip358.com/wp-content/uploads/2016/10/Canvas.jpg)](https://zip358.com/wp-content/uploads/2016/10/Canvas.jpg)会社で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
```

 [ ![white airplane](https://zip358.com/wp-content/uploads/2023/05/pexels-photo-674783-300x300.jpeg) ここ数年TOKYOに行っていない.

 ](https://zip358.com/2025/12/27/%e3%81%93%e3%81%93%e6%95%b0%e5%b9%b4tokyo%e3%81%ab%e8%a1%8c%e3%81%a3%e3%81%a6%e3%81%84%e3%81%aa%e3%81%84.html) 

 [ ![](https://zip358.com/wp-content/uploads/2025/12/flower2025.png) 漠然たるものを形にするのがクリエイターの仕事

 ](https://zip358.com/2025/12/26/%e6%bc%a0%e7%84%b6%e3%81%9f%e3%82%8b%e3%82%82%e3%81%ae%e3%82%92%e5%bd%a2%e3%81%ab%e3%81%99%e3%82%8b%e3%81%ae%e3%81%8c%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%81%ae%e4%bb%95%e4%ba%8b.html) 

 [ ![](https://zip358.com/wp-content/uploads/2025/12/Artificial-Intelligence-ai-2025.png) ポップアートと生成AIとAIで思ったこと.

 ](https://zip358.com/2025/12/25/%e3%83%9d%e3%83%83%e3%83%97%e3%82%a2%e3%83%bc%e3%83%88%e3%81%a8%e7%94%9f%e6%88%90ai%e3%81%a8ai%e3%81%a7%e6%80%9d%e3%81%a3%e3%81%9f%e3%81%93%e3%81%a8.html) 

 [ ![scenic view of a lightning in the sky](https://zip358.com/wp-content/uploads/2024/01/pexels-photo-4124167.jpeg) 映画アバターを観てきました.今年最後の映画見納め

 ](https://zip358.com/2025/12/24/%e6%98%a0%e7%94%bb%e3%82%a2%e3%83%90%e3%82%bf%e3%83%bc%e3%82%92%e8%a6%b3%e3%81%a6%e3%81%8d%e3%81%be%e3%81%97%e3%81%9f-%e4%bb%8a%e5%b9%b4%e6%9c%80%e5%be%8c%e3%81%ae%e6%98%a0%e7%94%bb%e7%b7%a0%e3%82%81.html) 

 [ ![](https://zip358.com/wp-content/uploads/2025/04/image-12.png) 田舎の公共交通機関がズタボロ感.皆さん使いませんか？

 ](https://zip358.com/2025/12/23/%e7%94%b0%e8%88%8e%e3%81%ae%e5%85%ac%e5%85%b1%e4%ba%a4%e9%80%9a%e6%a9%9f%e9%96%a2%e3%81%8c%e3%82%ba%e3%82%bf%e3%83%9c%e3%83%ad%e6%84%9f-%e7%9a%86%e3%81%95%e3%82%93%e4%bd%bf%e3%81%84%e3%81%be%e3%81%9b.html) 

 

[](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fzip358.com%2F2016%2F10%2F19%2Fhtml5%25e3%2581%25aecanvas%25e3%2582%2592%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2580%2582.html&linkname=HTML5%E3%81%AECanvas%E3%82%92%E3%83%88%E3%83%A9%E3%82%A4%E3%80%82 "Facebook")[](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fzip358.com%2F2016%2F10%2F19%2Fhtml5%25e3%2581%25aecanvas%25e3%2582%2592%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2580%2582.html&linkname=HTML5%E3%81%AECanvas%E3%82%92%E3%83%88%E3%83%A9%E3%82%A4%E3%80%82 "X")[](https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fzip358.com%2F2016%2F10%2F19%2Fhtml5%25e3%2581%25aecanvas%25e3%2582%2592%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2580%2582.html&linkname=HTML5%E3%81%AECanvas%E3%82%92%E3%83%88%E3%83%A9%E3%82%A4%E3%80%82 "Bluesky")[](https://www.addtoany.com/add_to/line?linkurl=https%3A%2F%2Fzip358.com%2F2016%2F10%2F19%2Fhtml5%25e3%2581%25aecanvas%25e3%2582%2592%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2580%2582.html&linkname=HTML5%E3%81%AECanvas%E3%82%92%E3%83%88%E3%83%A9%E3%82%A4%E3%80%82 "Line")[](https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fzip358.com%2F2016%2F10%2F19%2Fhtml5%25e3%2581%25aecanvas%25e3%2582%2592%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2580%2582.html&linkname=HTML5%E3%81%AECanvas%E3%82%92%E3%83%88%E3%83%A9%E3%82%A4%E3%80%82 "Threads")[](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fzip358.com%2F2016%2F10%2F19%2Fhtml5%25e3%2581%25aecanvas%25e3%2582%2592%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2580%2582.html&linkname=HTML5%E3%81%AECanvas%E3%82%92%E3%83%88%E3%83%A9%E3%82%A4%E3%80%82 "Copy Link")[](https://www.addtoany.com/share)
