小 中 大
■ ■ ■ ■ ■ ■ ■
HTML5のCanvasをトライ。
この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。
会社で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
タグ
AM,