Hatena Blog Tags
はてなブログ トップ
Canvas
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Canvas

(ウェブ)
【きゃんばす】

とはHTML要素の一つ。JavaScriptを使って図形（2次元ビットマップ画像）を描くことができる。HTML5の仕様の一部。2次元ベクター画像はSVG、3次元グラフィックスはWebGL。

canvasタグに対応していないブラウザ向けのライブラリ

関連キーワード

  • HTML
  • JavaScript
  • Ajax
  • Flash

Canvas

(ゲーム)
【きゃんばす】
このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
DIGGLE開発者ブログ•21日前

ReactでのCanvasの活用 - 巨大なテーブルの表示を高速化

はじめに Canvasとは DIGGLEで活用している部分 DIGGLEでCanvasを利用することにした経緯 初期のPLレポート つい最近のPLレポート CanvasによるPLレポート 実装上の工夫 避難ハッチを使う部分(useRef)を隔離 Canvasに関わるRefはカスタムHookなどに押し込み、基本的にはcanvasタグに渡すときのみ利用する スクロールイベントなどのユーザーの操作に伴って描画が変わるイベントハンドラー（イベントの管理）は一つのコンポーネントにまとめることで、どのコンポーネントでイベントハンドラーが発火された結果Canvasの描画が変化したのか分かりやすくする 複数キ…

#react#フロントエンド

ネットで話題

もっと見る
751ブックマークまずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.netようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマした...kachibito.net
454ブックマーク追悼　安倍晋三元首相 ～国葬にあたり、広く社会で弔意を～ | クラウドファンディング - White Canvassankei.en-jine.com
452ブックマークまだまだ間に合うCanvasでアニメーション入門（まとめと実践） :: 5509JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。 jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるように...5509.me
429ブックマークHTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIAics.media
424ブックマーク今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blogtechblog.kayac.com
408ブックマークHTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユ...design.kayac.com
394ブックマークHTML5 Canvas Cheat SheetCanvas element Attributes Name Type Defaultsimon.html5.org
375ブックマークrails3 + html5 canvasでお絵かき投稿サイトを作ろう！kray.jp
369ブックマークcanvasでキラキラした背景を作る方法 - KAYAC Engineers' Blogtechblog.kayac.com

関連ブログ

studioichiのブログ•5ヶ月前

店舗用にカーテンのような壁のようなものをと４号帆布でオーダーカーテン製作

店舗用にカーテンのような壁のようなものをと４号帆布でオーダーカーテン製作 お客様のご依頼で反巾×３ｍほどの天井から床までの長い帆布カーテンを製作。お客様と打ち合わせをしカーテンのような、壁のような不思議なものにしたい、実用的ではなくアートなイメージでなど意図をお伺いし当店の縫製側の意見や提案をしたり製作後の現場での取り付け作業のお話などシンプルながら細かなところまで、少し変わった加工をし製作しました。現状では国内帆布では４号帆布が一番厚い帆布になり、かなり厚みがあり重い生地になります。今回のカーテンも１枚で2.2kgくらいとかなり重いものになりますが部屋全体に雲形状に35ｍほどの帆布の壁となり…

#帆布カーテン#オーダーカーテン#キャンバスカーテン
skydum•5ヶ月前

jCanvasでのリアルタイム描画にハマった

業務でHTMLのcanvasにリアルタイムで描画する処理を書いている。 今まで使ったことがなかったのでどうもまだ慣れない。 今週はお盆休みなので、時間が取れる間に慣れておこうかと思う。 古いプロジェクトのメンテなので使っているライブラリの情報が少ないのが難点。 jCanvas | jQuery meets the HTML5 canvas 忘れないようにハマったところ drawRect, addLayerですでに追加済のlayer nameを使って描画すると既存のレイヤーは書き換わらない。(これは仕様) この時エラーにもならないが2個目の画像として別のオブジェクトとしてキャンバスに描画される。…

#JavaScript#jCanvas
私学妙案研究所News•9ヶ月前

キッズクリエイティブ研究所のご紹介

本日はキッズクリエイティブ研究所をご紹介します。 主催団体であるCANVASは、こどものための創造・表現の場を提供し、豊かな発想を養う土壌を整えることを目標として、様々な分野における関係者の熱意のもとに設立されたNPO法人です。以来、アーティスト、教育関係者、NPO、行政、自治体、ミュージアム関係者など、さまざまな方々と連携し、ワークショップの企画実施、セミナーの企画実施、調査研究等を進めています。 「キッズクリエイティブ研究所とは」 CANVASが企画している「キッズクリエイティブ研究所」は「かんじる･かんがえる･つくる･つたえる」がひろがる、こどものためのあそびとまなびの拠点をつくるワーク…

#キッズクリエイティブ研究所
少しはじめてみる•1年前

macのソフトcanvasを使って身分証明書のマスキングをやってみました

最近は、ネットでさまざまな登録や申し込みが完結できます。スマホで撮影した身分証明書の画像ファイルの各種番号をマスキングするのに、canvasというソフトを使ったらうまくいったといった話です。パソコンはmacです。 以下のリンク先をそのまま実行しました。分かりやすく丁寧な説明、感謝です。https://maneo-manager.com/canva-masking/ ネットで様々な手続きが可能になり、身分証明書をスマホで撮影しておいたものをパソコンに入れておいて必要な時に使っています。 先日、いつものように身分証明書をアップロードしようと思ったら、健康保険証の番号部分をマスキングした画像を提出す…

#身分証明書#マスキング
i2bskn blog•2年前

canvasで画像のリサイズ・トリミングする

サンプルコード canvasに画像を読み込むサンプルコードです。 以下では画像を読み込み、canvasを読み込んだ画像と同じサイズに設定してcanvasに読み込んだ画像をそのまま描画しています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } #canvas { border: solid 1px; } </style> </head> <bo…

#JavaScript
アイストマトバズーカのゲーム制作日記•2年前

JavaScriptさわってみる10回目(((ﾟ∀ﾟ))) Canvas

こんにちは。 今回はJavaScriptさわってみる企画10回目をやります。テーマはCanvas。CanvasとはHTML5の要素で、webページ上に線や円、文字や画像などを描画できるもののようです。 ってことでこれが使えたらかなり表現できる幅が広がりそうですね！ まずは免責。＊この記事は初心者が思うままにやってみたという内容ですので確かな情報とは言えません。無論、ここの情報によるトラブル等の一切の責任は負いかねます。 Canvasにはcontext(コンテキスト)という概念がありまして、線の太さや色など描画の元となる情報のことを言うようです。それらの情報をオブジェクトへ格納し、線を引くなどの…

#JavaScript#プログラミング初心者#Canvas#ゲーム制作#ブラウザゲーム
雑食性雑感雑記•2年前

【JavaScript & Canvas】Boids アルゴリズム 習作

「群制御みたいなもの」をなんか作ってみたいなーと調べていたらたどり着いた Boids アルゴリズム。 まずはアルゴリズムを理解するのに、良く書かれているコードの内容を見て、整理しながら書いてみました。 作成物 正方形領域だと移動範囲が狭いので、縦長にしました。 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // 描画エリアサイズ const WIDTH = 540; const HEIGHT = 720; // アイキャッチ画像撮影用大き目 // const WIDTH = 1000; // const HEIGHT = 1000; // …

#Canvas
雑食性雑感雑記•2年前

【JavaScript & Canvas】等速度運動のボールを弾ませてみる

先日にボールを壁に反射させるのを作った。 コレ、ボールが反射するときに弾ませてみたら面白いかなーと思い、弾ませる方法を考えてみた。 作成物 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // 描画エリアサイズ const WIDTH = 540; const HEIGHT = 480; //////////////////// // // 描画する点 // 物理法則に従って落下させる // class Point { constructor(x, y, ts) { // 初期位置およびタイムスタンプ this.x = x this.y = …

#JavaScript#Canvas
雑食性雑感雑記•2年前

【JavaScript & Canvas】一定間隔で更新する描画を作ってみる。(ライフゲーム)

前回まではベストエフォートで常に更新処理終わったら描画の更新をかける方針でした。 そうではなく「一定のタイミングで更新」かける方式の描画についても試してみます。 ライフゲームはよく作っていて分かりやすいのでこれで。 作成物 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // セル1辺サイズ (pixel) const CELL_SIZE = 6; // 区切り線の太さ (pixel) const LINE_WIDTH = 1; // 横方向および縦方向のセル個数 const H_CELL_COUNT = 80; const V_CELL_C…

#JavaScript#Canvas#ライフゲーム
【英日対訳】ミュージシャン達の言葉what's in their mind•1日前

【再】英日対訳：デューク・エリントン（米・pf、comp）　1963 　スウェーデンSVT

https://www.youtube.com/watch?v=sY3rTWpVkQk ↑本スクリプトの動画はこちらからどうぞ Interview by Sven Lindahl for Swedish TV channel “SVT,” recorded in Sweden in February 3rd, 1963. デューク・エリントン スェーデン公共放送 聞き手：スウィン・リンドー 1963年2月3日収録 Duke Ellington Good evening, ladies and gentlemen. I am, or rather, my name is Duke Ellingt…

qyresearch-news’s diary•2日前

ウェリントンブーツ業界競合分析：世界市場規模、成長機会、需要分析、開発動向2025-2031

QYResearch株式会社（所在地：東京都中央区）は、最新の調査資料「ウェリントンブーツ―グローバル市場シェアとランキング、全体の売上と需要予測、2025～2031」を2025年1月9日より発行しました。本レポートでは、ウェリントンブーツの世界市場規模、成長予測、過去データと未来の市場動向を詳細に分析し、業界の主要な推進力、課題、リスク、機会についても包括的に検討します。ウェリントンブーツ市場は製品別、用途別、地域別に区分し、各セグメントにおける成長要因、機会、課題を掲載しています。さらに、主要企業の売上、市場シェア、競争環境に関する詳細な分析を行っており、企業が市場の変化に迅速に対応し、効…

タタッと！ドラゴンさん🐉•2日前

🎨【TypeScript × paper.js】「paper.Item.addメソッドは追加とは限らない！？」という話

🐉 グォォォオオ！ Hello,World!! ドラゴンだ！ 🐉ちなみに昔好きだったレンジャーシリーズは「忍者戦隊カクレンジャー」だぜ！ 🐉 ... 🐉 ...（これ、世代がバレるくない・・？） 🐉今回は Paper.jsで地味に詰まった内容についての備忘録系です！ 🐉 Paper.jsが不慣れな人間がやりがちだろう！というネタです。このブログ記事が助けになれば嬉しいです！ はじめに paper.jsにおけるItemとは サンプルコード 簡単にコード解説するよー addChildメソッドの挙動 まとめ 参考文献 はじめに paper.jsは、HTML5 Canvasをベースにしたオープンソース…

檜山正幸のキマイラ飼育記 (はてなBlog)•2日前

ストリング図、ストリング図動画が“使える”とは？

僕は長年のストリング図ユーザーでストリング図ファンです。「ストリング図は役に立つ」と断言できます。よって、ストリング図の使用を推奨したいし、推奨しています。では、ストリング図が“使える”とはどういうことでしょうか？ストリング図、それと後で述べるストリング図動画が使えるようになるとは、ある種の作品を創作できるようになることです。絵画・イラストやアニメーションは作品ですが、ストリング図／ストリング図動画によりそういう作品が創れるようになるのです。自分で作品を創ることを目標に学ぶといいでしょう。論理の文脈においては、作品は証明です。したがって、作品が創れるようになるとは、（形式的な）証明が書けるよう…

夜風のMixedReality•3日前

MRTK3でスクロール機能を使用する その① スクロールのサンプル

本日はMRTK3枠です。 筆者が新年早々体調を崩してしまったので２日ぶりの記事になります。 〇MRTK3のスクロールパネル MRTK3のサンプルであるMRTKDevTemplateではMRTK3の様々なサンプルが提供されています。 redhologerbera.hatenablog.com スクロールのサンプルはScrollingExampleシーンになります。 このシーンでは３つのタイプのサンプルが提供されています。 〇VerticalScrolling VerticalScrollingは鉛直方向へのスクロール移動を行います。 〇HortizontalScrolling Hortizont…

いつも笑顔で！（「水平線の先にある夢」の続きブログ）•3日前

harmoe 7thシングル「トゥインクル・デイズ」届きました。

harmoe 7thシングル「トゥインクル・デイズ」が発売１日前（フラゲ日）に届きました。 楽天ブックスの初回限定盤 CD＋Blu-ray、先着特典付きでしたので缶バッジが付いてました。 まずはCD音源をPCに取り込んで、その後、スマホへ入れて車で出かけたときに聞いてみました。 まずは、表題曲の「トゥインクル・デイズ」ですが、 最初に再認識したのは、イントロがなくいきなり歌い出す曲だということ。 youtu.be harmoeの楽曲には曲ごとにおとぎ話などのコンセプトが設定されていますが、今回のコンセプトは「ピーター・パンとウェンディ」！ あと、この曲はTVアニメ『いずれ最強の錬金術師？』ED…

獣の咆吼•3日前

好きな歌詞カルタをサンドリオン縛りでやってみる

知り合いがちょいちょいやってる好きな歌詞カルタを、自分でもずっとやりたいやりたいと思ってたんですが、毎回挫折してまして。挫折してる理由が、だいたい好きな歌詞って頭文字被ってどうしようもなくなるよねってのと、なるべくアーティストの偏りを減らしたいと思うけど、好きなアーティストの曲ってどれも好きだから選べないよね、ってところなので、いっそ逆転の発想で1アーティスト縛りしたらどうなるかなって思って試しにやってみたら、うっかり思ってた以上にちゃんと出来てしまったので、せっかくなら放流してみようという記事です。 というわけでタイトル通り、サンドリオン楽曲から好きな歌詞カルタです。 たぶん全曲1回は出てい…

Yappli Tech Blog•4日前

Ink APIさわってみた

こんにちは、Androidグループに所属しているにゃふんた（nyafunta9858）です。 今回は、なかなか試せていなかったAndroidXの新しいライブラリを弊社のYappdateDayを使って触ってみましたので、そちらについてお話してみたいと思います。 YappdateDayについて 今回試したライブラリ 手書き入力を試す、その前に 環境構築 実際に手書き入力を試してみた 1. 手書き入力を受け付けるViewのセットアップ 2. MotionEvent.ACTION_DOWN受信後、手書き入力の開始をAPIへ通知 3. MotionEvent.ACTION_MOVE受信後、手書き入力の更…

Generative Agents Tech Blog•4日前

「AIエージェントキャッチアップ #16 - Open Canvas (LangChain)」を開催しました

ジェネラティブエージェンツの大嶋です。 「AIエージェントキャッチアップ #16 - Open Canvas (LangChain)」という勉強会を開催しました。 generative-agents.connpass.com アーカイブ動画はこちらです。 youtube.com Open Canvas 今回は、OpenAIの「Canvas」にインスパイアされたLangChainの「Open Canvas」について、ソースコードを読んだり動かしたりしてみました。 Open CanvasのGitHubリポジトリはこちらです。 github.com 今回のポイント Open Canvasの概要 Op…

ecbeing labs（イーシービーイング・ラボ）•4日前

SlackのCanvasで工程管理を効率化

こんにちは、Nです。 突然ですが、チームでプロジェクトに取り組んでいると、設計・開発・試験など工程をすすめるにあたって、Slack、Teamsなどで会話した内容を探すことはありませんか？ 私のチームでも「あの時話した内容はどこにあったかわかる？」とか「設計の時に話していた内容が見つからない」などスレッドを探すことがありました。 チーム内で何か改善策がないか検討したところ、SlackのCanvasが情報整理に役立つのではないかということで施策をしてみました。 そこで、最近チームで取り組んでいるCanvasを使った工程管理についてお話します。 工程管理の5ステップ 私たちのプロジェクトは、以下の5…

洋楽和訳/曲紹介ブログ•5日前

【凄さは？音楽の原点は？】Robert Glasper入門【おすすめ曲/ベストアルバム紹介】

">本サイトはアフェリエイト広告を利用しています。 ">ロバート・グラスパー（Robert Glasper、1978年4月5日生まれ）は、アメリカ・テキサス州ヒューストン出身のジャズ・ピアニスト、音楽プロデューサーです。ジャズ、ヒップホップ、R&B、ソウルなど多彩なジャンルを融合させた独自の音楽スタイルで知られています。彼の革新的なアプローチは、音楽界における伝統と現代の架け橋として機能し、多くのリスナーに影響を与え続けています。例えば、ジャズの伝統的な即興演奏を、ヒップホップのリズムやR&Bのメロディに融合させることで、新しい音楽スタイルを生み出しています。また、グラミー賞受賞アルバム『ブラ…

かわいいは魔法•5日前

2025 BOYFRIEND JEONGMIN BIRTHDAY LIVE EVENT IN JAPAN 2025.1.5 20:00公演

MCレポはニュアンスで受け取ってください。 行間開いてるところは違うブロックだと思ってください。 ・セットリスト 그해 겨울 왜 그땐 몰랐을까(Why?) Listen/DH cover 첫 장면(The first scene) 백설탕(Sweet heart)/MONSTA X cover 그날 우리(The Day of Ours) One more time, One more chance/山崎まさよし cover 나의 종착역(my last stop) 잘 지내더라(You’ve moved on) canvas https://x.com/on_and_on456/statu…

かわいいは魔法•5日前

2025 BOYFRIEND JEONGMIN BIRTHDAY LIVE EVENT IN JAPAN 2025.1.5 16:00公演

MCレポはニュアンスで受け取ってください。 行間開いてるところは違うブロックだと思ってください。 ・セットリスト 잘 지내니(My Dear) 왜 그땐 몰랐을까(Why?) 그날 우리(The Day of Ours) 비가오는데(Rain) 그해 겨울 #YOUNG DUN 익명에게(Unknown) 눈사람과 봄(Snowman and Spring) 파도(Wave) canvas https://x.com/on_and_on456/status/1875820340984869224?s=46&t=FKTveRO1KRUJma2ZTFc88Q ・オープニングトーク「昨日はTikTo…

そばちゃ•5日前

ebitengine 使ってみた: デプロイ編

背景/お気持ち (とりあえず) デプロイ 事前作業: 画像とかを embed する ローカルでビルド Vercel の設定 改善点 作ったもの: https://ebiten-icecream-game.vercel.app/ スクショ↓ デプロイ編ってあるけど今のところこれだけ。あとでコード編も書くかも? 背景/お気持ち Golang さわりたかったんだけど、TODO アプリ作るにはモチベが足りなかったので、とりあえず ebitengine 触ってみた。1個目は ChatGPT と Cursor に土台ほぼ書いてもらってこまかいところだけ修正してたんだけど、さすがに学んだ感がゼロだったので、…