質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

257閲覧

hover時に、canvasを動かしたい

退会済みユーザー

退会済みユーザー

総合スコア0

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/11/30 10:34

編集2022/01/12 10:55

解決したいことは、html上aタグのリンクをhoverした時に、canvas内のオブジェクト(パーティクルの円)の大きさを変えたいです。
hoverのjQueryの処理は、記述済みで、canvas内のオブジェクトの変形のさせ方が分かりません。

canvasの記述にあまり慣れておらず、ご教授いただけますと幸いです。

codepenにてテストしております。
https://codepen.io/ThomasMaverick/pen/vYXEoaK

<div class="scene one"> <div class="canvas" id="canvas"></div> </div> <div class="fixed-link"> <a href="#" id="target">リンク</a> </div>

canvas内のjsコード

function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return {done: true}; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(1, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } var Particle =/*#__PURE__*/ function () { function Particle(x, y) { if (x === void 0) { x = 0; } if (y === void 0) { y = 0; } this.reset(); this.fadingSpeed = Math.random(); } var _proto = Particle.prototype; _proto.update = function update() { this.position.x += Math.random() * 1 - 1; this.position.y -= this.velocity.y; this.alpha -= this.fadingSpeed; if (this.alpha < 0) { this.reset(); } }; _proto.reset = function reset() { this.position = { 'x': 0, 'y': 0 //'y': Math.random() + 0.05 }; this.velocity = { 'x': 0, 'y': Math.random() + 0.05 }; this.alpha = 1; this.fadingSpeed = Math.random() * 0.025 + 0.005; }; return Particle; }(); var ParticleEmitter =/*#__PURE__*/ function () { function ParticleEmitter(x, y) { if (x === void 0) { x = 0; } if (y === void 0) { y = 0; } this.position = { 'x': x, 'y': y }; this.particles = []; this.particlesNumber = 5; for (var i = 0; i < this.particlesNumber; i++) { var particle = new Particle(); this.particles.push(particle); } } var _proto2 = ParticleEmitter.prototype; _proto2.update = function update() { for (var _iterator = _createForOfIteratorHelperLoose(this.particles), _step; !(_step = _iterator()).done;) { var particle = _step.value; particle.update(); } }; return ParticleEmitter; }(); var Experience = function () { function Experience(container) { console.clear(); this.canvas = document.createElement('canvas'); container.appendChild(this.canvas); this.context = this.canvas.getContext('2d'); var fps = 12; this.fpsInterval = 1000 / fps; this.then = Date.now(); this.particleEmitters = []; this.radius = 225; for (var i = 0; i < 360; i++) { var particleEmitter = new ParticleEmitter(0, this.radius); this.particleEmitters.push(particleEmitter); } this.resize(); this.bind(); this.loop(); } var _proto3 = Experience.prototype; _proto3.bind = function bind() { window.addEventListener('resize', this.resize.bind(this), false); }; _proto3.render = function render() { for (var _iterator2 = _createForOfIteratorHelperLoose(this.particleEmitters), _step2; !(_step2 = _iterator2()).done;) { var particleEmitter = _step2.value; particleEmitter.update(); this.context.save(); this.context.translate(this.canvas.width / 2, this.canvas.height / 2); this.context.rotate(this.particleEmitters.indexOf(particleEmitter) * Math.PI / 180); var my_gradient2 = this.context.createLinearGradient(0, 0, this.canvas.width / 2, this.canvas.width / 2); my_gradient2.addColorStop(0, "#a4d2ca"); my_gradient2.addColorStop(0.5, "#d7ebe8"); my_gradient2.addColorStop(1, "#dfbfc4"); this.context.fillStyle = my_gradient2; for (var _iterator3 = _createForOfIteratorHelperLoose(particleEmitter.particles), _step3; !(_step3 = _iterator3()).done;) { var particle = _step3.value; particle.update(); this.context.globalAlpha = particle.alpha; this.context.beginPath(); this.context.arc(particle.position.x, particleEmitter.position.y - particle.position.y, 1, 0, Math.PI * 2); this.context.fill(); this.context.closePath(); var my_gradient = this.context.createLinearGradient(0, 0, this.canvas.width, this.canvas.width); my_gradient.addColorStop(0, "#dfbfc4"); my_gradient.addColorStop(0.5, "#d7ebe8"); my_gradient.addColorStop(1, "#a4d2ca"); this.context.fillStyle = my_gradient; } this.context.restore(); } }; _proto3.loop = function loop() { this.raf = window.requestAnimationFrame(this.loop.bind(this)); var now = Date.now(); var delta = now - this.then; var degree = 1; if (delta > this.fpsInterval) { this.context.translate(this.canvas.width / 2, this.canvas.height / 2); this.context.rotate(++degree * Math.PI / 180); this.context.translate(-this.canvas.width / 2, -this.canvas.height / 2); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.beginPath(); var my_gradient3 = this.context.createLinearGradient(0, 0, this.canvas.width / 2, this.canvas.width / 2); my_gradient3.addColorStop(0, "#a4d2ca"); my_gradient3.addColorStop(0.5, "#d7ebe8"); my_gradient3.addColorStop(1, "#dfbfc4"); this.context.fillStyle = my_gradient3; this.render(); this.then = now; } }; _proto3.resize = function resize() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; this.screen = { 'center': { 'x': this.canvas.width / 0, 'y': this.canvas.height / 0 }, 'hypotenuse': Math.sqrt(this.canvas.width / 2 * this.canvas.width / 2 + this.canvas.height / 2 * this.canvas.height / 2) }; this.reset(); }; _proto3.reset = function reset() { window.cancelAnimationFrame(this.raf); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.loop(); }; return Experience; }(); var getRandomColor = function getRandomColor() { var value = Math.floor(Math.random() * 255); return '#' + value.toString(16) + value.toString(16) + value.toString(16); }; var container = document.getElementById('canvas'); var experience = new Experience(container); //hover var target = document.getElementById('target'); var sec1 = document.getElementsByClassName("section-one")[0]; target.addEventListener('mouseover', function () { sec1.style.background = '#000000';   //ここにhoverした時の処理 }, false); target.addEventListener('mouseleave', function () { sec1.style.background = '#0091EA';  //ここにhoverが外れた時 }, false);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/12/02 01:09

svgとかでもよいでしょうか? サンプル画像と、具体的な動作を図示してもらえると回答しやすいかと
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問