超簡単なコード🦋マウス追従をする。 #javasriptcode
2022.11.28
おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。
そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです（尺も短いし…）。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。
let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
let a = e.currentTarget.getBoundingClientRect();
let x = e.clientX - a.left;
let y = e.clientY - a.top;
circle.style.top = `${y}px`;
circle.style.left = `${x}px`;
circle.style.transform = `translate(50px,50px)`;
})余談：
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな（音楽は軽やかなんですけど…😅）。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addEventListener, body, circle, css, currentTar, document, function, getElementById, html, javasript, javasriptcode, let, mousemove, quot, コード, サイト, ソース, そちら, タイトル, デモ, ポインター, ボツ, マウス, リリース, 一つ, 一定, 中, 使用, 先週, 円, 再生, 判断, 動画, 回数, 土曜日, 尺, 撮影, 朝, 検証, 理由, 超簡単, 距離, 追従, 間隔, 雨,
日本沈没みたいな南海トラフ巨大地震の威力が半端ないって。
2022.01.23
NHKの南海トラフ巨大地震のシュミレーションをYOUTUBEにUPしている人がいるのを見たのだけど、これって日本沈没じゃないかなって思えるですよね。高知県とか４分ぐらい揺れが続くみたいで・・・家とかどうなっちゃうだろうかってかなり心配です。
そしてこの南海トラフ巨大地震の最悪的なシナリオでいけば、四国とか九州地方とかかなりの被害になるけれど、東京や大阪も揺れるらしくて、いや本当にどうなっちゃうだろうかって思える大地震です。
こんな地震が起きたら、日本の経済にかなり打撃だと思いますよ、株も円も暴落して敗戦直後の状態に真っ逆さまになる事は間違いなく、日本だけではなく世界にも影響を与えかねないじゃないかなって素人目でもわかるですけど、日本ってこれに対応した対策しているのかなぁ…。
https://youtu.be/qc35yer2GqM?t=377
コロナの対応を見る限りでも後手後手対応なのに、本当に南海トラフ巨大地震の対応や対策が取れているか凄く疑問をいだきました。
いや本当にこの南海トラフ巨大地震のシュミレーション怖いわ・・・。
お金持ちの人が海外へ逃げていくわけがなんとなくだけど分かる。自分も英語が喋れてそれなりに海外で働けるスキルがあって独り身だったら間違いなく移住すると思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
4, NHK, UP, youtube, かなり, これ, コロナ, シナリオ, シュミレーション, トラフ, 世界, 九州地方, 事, 人, 円, 半端, 南海, 四国, 地震, 大地震, 大阪, 威力, 家, 対応, 対策, 影響, 後手後手, 打撃, 敗戦, 日本, 日本沈没, 暴落, 最悪, 本当, 東京, 株, 状態, 疑問, 直後, 真っ逆さま, 素人目, 経済, 被害, 限り, 高知県,
世界成長がある限り。
2020.02.17
「世界成長がある限り、投資信託は長期的に見るとプラスです。ですが日本が大震災、そう南海トラフ巨大地震や首都直下型地震が発生したら暴落するのでしょうか？そのとき、自分が投資信託している投資信託の人工知能さまは円を全部売り捨てドルやユーローをお買いくださるのか…所々不安です。
投資信託、運用会社はこの事は確実に考えているだろうから、それに手を打っているはず、こういうの問い合わせしても定型文しか恐らく返信してこないからわからないけど、たぶんしていると思います。自分がしている投資信託は海外株や鉱物とかお買いくださるので、あまり円で日頃からお持ちにならないようです。なのでトランプ氏が弾劾されていただければ、とても嬉しい限りです。トランプ氏が景気回復にはあまり貢献できていないらしいので、次期大統領が決まればいろいろと経済効果はあると思います。ちなみに投資信託の人工知能さまのおかげでご利益が約?0万ほど出ています。「ありがたや?ありがたや?」月にコレぐらい稼いでくれるわけではありません。1年間で?0万円です。でもまぁ…いま働いていなくて含み益が出ているだから。1千万円貯めれば月に10万円ぐらいお金が働いてくれてお金を得る事が出来るのではないかと思っております。
トイウコトで大震災が発生したらどうするか？いろいろと考えております。住む所はどうなるだろうとか、いろいろ考えております。ちなみに予兆があれば国が事前にお知らせしてくれるそうです。それはそうだよな。凄い被害になるらしいから」と呟いてみました。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, ありがたや, いろいろ, おかげ, お持ち, コレ, ご利益, それ, とき, トラフ, トランプ, ドル, パス, ユー, ロー, 万, 不安, 世界, 事, 人工, 信託, 円, 効果, 南海, 問い合わせ, 地震, 大統領, 大震災, 定型, 弾劾, 成長, 所々, 手, 投資, 投資信託, 文, 日本, 日頃, 景気回復, 暴落, 月, 次期, 海外株, 発生, 直下, 知能, 約, 経済, 自分, 貢献, 返信, 運用, 鉱物, 限り, 首都,
Canvasで円がぐるぐる回る。
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="ctx" ></canvas>
<script>
"use strict";
let x = 0,y = 0;
let xs = 300,ys = 300;
let xc = 1,yc = 1;
let ctx = document.querySelector("#ctx");
let canvas;
ctx.width = window.screen.width;
ctx.height = window.screen.height;
if(ctx.getContext)
{
canvas = ctx.getContext("2d");
setInterval(draw,77);
}
function draw(){
canvas.beginPath();
canvas.fillStyle = "#3399ff";
canvas.arc(x,y,35,0,Math.PI*2,true);
canvas.globalCompositeOperation = "xor";
canvas.fill();
x =((Math.sin (xc) * xs)) + 500;
y =(Math.cos(yc) * ys) + 500;
console.log(x + ":" + ctx.width);
console.log(y + ":" + ctx.height);
if(x < 0 || x > ctx.width)
{
xs*=-1;
}
if(y < 0 || y > ctx.height)
{
ys*=-1;
}
if(x<0)
{
x=0;
}
if(y<0)
{
y=0;
}
if(x > ctx.width)
{
x=ctx.width;
}
if( y > ctx.height)
{
y=ctx.height;
}
xc+=1
if(xc>360)
{
xc=0;
}
yc+=1
if(yc>360)
{
yc=0;
}
}
</script>
</body>
</html>Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, １, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,