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

Canvas

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

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

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

関連キーワード

  • HTML
  • JavaScript
  • Ajax
  • Flash

Canvas

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

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

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

#帆布カーテン#オーダーカーテン#キャンバスカーテン

ネットで話題

もっと見る
752ブックマークまずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.netようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマした...kachibito.net
459ブックマーク要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話lowply.github.io
455ブックマーク追悼　安倍晋三元首相 ～国葬にあたり、広く社会で弔意を～ | クラウドファンディング - White Canvassankei.en-jine.com
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
395ブックマークHTML5 Canvas Cheat SheetCanvas element Attributes Name Type Defaultsimon.html5.org
375ブックマークrails3 + html5 canvasでお絵かき投稿サイトを作ろう！kray.jp
369ブックマークcanvasでキラキラした背景を作る方法 - KAYAC Engineers' Blogtechblog.kayac.com

関連ブログ

skydum•4ヶ月前

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

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

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

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

本日はキッズクリエイティブ研究所をご紹介します。 主催団体である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】等速度運動のボールを弾ませてみる

先日にボールを壁に反射させるのを作った。 コレ、ボールが反射するときに弾ませてみたら面白いかなーと思い、弾ませる方法を考えてみた。 作成物 // 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#ライフゲーム
index.php•2年前

canvasで特定の幅で文字を折り返して表示する

やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row; // 16文字の場合に配列に入れる if (tmp.length === 16) { results.push(tmp); // 文字カウント用の変数をクリ…

#HTML#JavaScript
可能性 ある 島 の•1日前

展覧会　野沢裕個展『Still Life』

展覧会『野沢裕「Still Life」』を鑑賞しての備忘録KAYOKOYUKIにて、2024年11月5日～12月1日。 木枠に張った画布を設置した日常的な空間を描いた絵画と、その絵画を画布を設置した場所に配して絵画と同じ構図で撮影した写真とを対とした「CANVAS canvas」シリーズや、画布を切り抜き、その隙間から背後の景観が覗く映像を切り出した画布に投影する《Still Life》、海岸に設置した円鏡を撮影した写真及び映像の組み作品《○○》などで構成される、野沢裕の個展。 《CANVAS canvas #22》(273mm×160mmの2点組)は壁際のベッドか何かの上に置かれた茶色いクッ…

Fashion Express•1日前

星野源ファッションまとめ！私服や衣装のブランド紹介（Twitter・Instagram・テレビ等）

星野源さんが着用した衣装や私服のブランド名を紹介していきます！ テレビだけでなく、Twitter・Instagram (インスタ)・雑誌等で着用しているファッションアイテムについても、調査予定です。

Django Girls and Boys 備忘録•1日前

【Unity】Unityで背景を設定する方法

Unityでゲームやアプリを開発するとき、背景の設定は非常に重要です。 背景を適切に設定することで、ゲームやアプリの雰囲気が大きく向上します。 この記事では、Unityの背景設定方法について、いくつかの簡単なステップを紹介します。 １．カメラの背景色を設定する 背景色を単色に設定したい場合は、カメラの設定を変更するだけで簡単に行えます。次の手順で設定しましょう。 手順: 手順：１．カメラを選択： Hierarchyビューから`Main Camera`を選択します。 ２．単色の背景を設定する場合は、InspectorビューでCameraの項目の中の「Clear Flags」にて「Soloi Co…

不適合者のジャンクヤード・長文置き場•3日前

AIに分析をしてもらってみた　※22000字程

自分AIは何が分析できるか、っていうのを会話を通じて考えてみたいです。 先程映画を見た話をしていたのですが、ある程度会話して情報をやり取りした後、私が好みそうな映画を紹介してみて、って聞いてみたわけです。かなりの精度で当てられて、これはって思ったんですね。 これから、私が気に入っている映画をあげますので、私の性格や思考、嗜好などを推測してほしいですね。 Copilot面白い試みですね！ぜひ、あなたが気に入っている映画を教えてください。それをもとに、あなたの性格や思考、嗜好を推測してみます。どんな映画が好きですか？ソース: Copilot との会話、 2024/10/13みんなの心に残る名作映画…

池平徹兵　teppeiikehila•3日前

とっとりnow 2024 冬号

表紙絵を担当させて頂いている鳥取県の情報誌「とっとりNOW 冬号 2024」 「冬のくじら」2024 45.5cm×38.0cm oil on canvas 氷の山を駆け抜ける智頭急行とスキー少女。 5年間担当してきた鳥取県の情報誌「とっとりNOW」の表紙絵の任期も次が最終回です。 ラストスパートで自分に負けたくない気持ちが絵に溢れました。 巨大な凧を揚げる体験型イベント「カイケジャンボリー」（米子市）のくじら。 雪の代わりに降る「むすんでひらいて」のおむすびと、「菓子はな」の豆大福。 今回はモチーフの1つ１つの動きを意識して描くことで、観た人の心の中で絵を動かそうと思いました。 毎号、原画の…

スタイル・エッジ技術ブログ•3日前

React で QR コードを生成して、タイトルを QR コードの下に描画したうえで画像ファイルとしてダウンロードしてみたい！！

はじめに こんにちは、しおです。少し前までひどく暑かったのに、もうすっかり年の瀬ですね。 冬っぽい画像を生成してみたので、ぜひ癒されてください。 癒されましたね。 さて、いま私が開発で携わっているプロダクトにて、『QR コード*1をアプリケーション内で生成して画像として表示＆ダウンロードしたい。その際に、任意のタイトルを画像に埋め込みたい。』という要件が発生しました。 そこで、今回はその対応で実際に使用した qrcode.react という React 向けのライブラリを用いて React アプリケーション内で QR コードとタイトルを描画したうえで画像ファイルとしてダウンロードさせるまでの流…

りんごが好きなのでぃす•3日前

Firefox 133.0

2024年11月28日、Mozilla Foundationは "Firefox 133.0" をリリースしました。 このアップデートではいくつかの新機能の追加とセキュリティアップデートが行われています。 通常は自動でアップデートが行われますが、すぐにアップデートしたい場合はFirefoxのAboutを開くか、以下の公式サイトから最新版をダウンロードして差し替えて下さい。 www.mozilla.org

qyresearch•3日前

お手頃な高級バッグの世界市場調査レポート2024

2024年11月28日に、QYResearchは「お手頃な高級バッグ―グローバル市場シェアとランキング、全体の売上と需要予測、2024～2030」の調査資料を発行しました。本報告書は、お手頃な高級バッグの世界市場を分析し、主要企業の総売上高、収益、価格、市場シェア、ランキングなどを掲載しています。また、地域別、国別、製品タイプ別、用途別に市場を分析しています。2019年から2030年までのお手頃な高級バッグの市場規模を販売量と売上高に基づいて推計と予測しています。企業が事業成長戦略を策定し、競合状況を評価し、市場ポジションを分析し、お手頃な高級バッグに関連する情報に基づいてビジネス上の意思決定…

人気フィギュア安値で予約【トイゲット！Blog】•3日前

【創彩少女庭園】1/10『ウルフさん』プラモデル【コトブキヤ】より2025年6月発売予定♪

普通の女の子プラモデル「創彩少女庭園（そうさいしょうじょていえん）」より、「ウルフさん」が、コトブキヤから新登場☆ 【創彩少女庭園】シリーズに、『ウルフさん』がラインナップ。 『一条 星羅【令法高等学校・夏服】』と『ウルフレイヤーカット』を組み合わせたキット。 創彩少女庭園スピンオフ「〇〇さん」シリーズ第1弾とのコトですが、要は開発費を浮かせる為の苦肉の策で発売済みのキットを組み合わせた公式カスタマイズキット。 表情パーツは、「通常顔」「ドヤ顔」「きょとん顔」「にらみ顔」の全4種♪ ヘアスタイルは、「ウルフレイヤーカット」のみ。 前髪パーツは、「通常タイプ」「メガネ対応タイプ」の2種類。 完成…

FXSP株式会社。•4日前

土地持ちは、最強だと、言われる理由とは？【なんJ、海外の反応】　

土地持ちは、最強だと、言われる理由とは？【なんJ、海外の反応】 土地持ちが最強だと言われる理由――その真髄を紐解くと、社会構造の深淵に触れることになる。それは単に土地という物理的資産を持つこと以上の意味を持つ。土地とは、時間と空間を支配する鍵であり、現代の「貴族的特権」とも言える存在なのだ。そして、この特権を享受する者がなぜ最強と称されるのか、その理由を語るには、「なんJ」で交わされる議論や「海外の反応」をも視野に入れながら、人間社会の複雑な絡み合いを解きほぐす必要がある。まず、土地持ちが最強とされる背景には、資本主義社会の不変のルールがある。土地は生産性を生み出す土台であり、同時に何もせずと…

qyresearch-pressrelease’s diary•4日前

建築用スプレーロボット業界競合分析：世界市場規模、成長機会、需要分析、開発動向2024-2030

2024年11月27日に、QYResearchは「建築用スプレーロボット―グローバル市場シェアとランキング、全体の売上と需要予測、2024～2030」の調査資料を発行しました。本報告書は、建築用スプレーロボットの世界市場を分析し、主要企業の総売上高、収益、価格、市場シェア、ランキングなどを掲載しています。また、地域別、国別、製品タイプ別、用途別に市場を分析しています。2019年から2030年までの建築用スプレーロボットの市場規模を販売量と売上高に基づいて推計と予測しています。企業が事業成長戦略を策定し、競合状況を評価し、市場ポジションを分析し、建築用スプレーロボットに関連する情報に基づいてビジ…

Nishiakashi’s Blog•5日前

Firefox133.0(正式版)リリース

Firefox 133.0(正式版)がリリースされました。 ・Firefox に新しいトラッキング防止機能であるバウンス トラッキング保護が追加され、強化トラッキング保護の「厳格」モードで利用できるようになりました。この機能は、リダイレクト動作に基づいてバウンス トラッカーを検出し、定期的に Cookie とサイト データを消去してトラッキングをブロックします。 ・他のデバイスのタブを表示するためのサイドバーを、タブの概要メニューから開くことができるようになりました。 ・GPU アクセラレーション Canvas2D が Windows でデフォルトで有効になり、パフォーマンスが向上しました。 …

polysan_開発メモ•5日前

import tkinter as tk from tkinter import ttk class ScrollableApp: def __init__(self, root): # メインフレーム self.root = root self.root.title("Scrollable Treeview Example") # Canvasを使って全体スクロールを実現 self.canvas = tk.Canvas(root) self.scrollbar = ttk.Scrollbar( root, orient="vertical", command=self.canvas.yvie…

qyresearch-prのブログ•5日前

迷彩ネットの世界市場レポート：成長、市場規模、競合状況、予測2024-2030

2024年11月26日に、QYResearchは「迷彩ネット―グローバル市場シェアとランキング、全体の売上と需要予測、2024～2030」の調査資料を発行しました。本報告書は、迷彩ネットの世界市場を分析し、主要企業の総売上高、収益、価格、市場シェア、ランキングなどを掲載しています。また、地域別、国別、製品タイプ別、用途別に市場を分析しています。2019年から2030年までの迷彩ネットの市場規模を販売量と売上高に基づいて推計と予測しています。企業が事業成長戦略を策定し、競合状況を評価し、市場ポジションを分析し、迷彩ネットに関連する情報に基づいてビジネス上の意思決定を行うのに役立つ定量的・定性的分…