WebGLを使ったマンガビューワを作っている - daiizhttps://gyakky.herokuapp.com/capture/twitter/1030059159431999488#.png
オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
【問題】アスペクト比を維持して画像を表示【JavaScript,Canvas】 - Qiita
画像をアスペクト比を維持しながら引き延ばしてcanvasの中央に描画しなさい。 また、画像が表示されない箇所は黒く塗りつぶしなさい。 ※画像はcanvasとはアスペクト比が異なるものを用意してください。 解答例 function onLoadBody() { var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(); img.src = "img/test1.png"; img.onload = function() { var canvasAspect = ctx.canvas.width / ctx.canvas.height, // canvasのアスペクト比 imgAspect = img.width / img.height, // 画像のアスペクト比 left, top, wi
Cropping Images To A Specific Aspect Ratio With JavaScript
In this 3 minute tutorial we’ll write a tiny JavaScript function that helps us crop images to various aspect ratios. Super useful for cropping photos before posting to social media timelines or uploading profile pictures as these are often required to be of a certain aspect ratio. In this tutorial we’ll by modifying image data. For example, when a user is about to upload a an image we crop it to a
canvas のタイポグラフィ効果 - HTML5 Rocks
My Background <canvas> entered my awareness in 2006 when Firefox v2.0 was released. An article on Ajaxian, describing the transformation matrix, inspired me to create my first <canvas> web-app; Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives; inspiring the creation of Sketchpad (2007-2008) in an effort to put together an application "better than Paint" in th
たった８行！キャンバスをワンクリックで保存させるJavaScriptコード（IEも大丈夫） – console dot log
前回の「コピペでOK！Chart.js の数字を３桁カンマで表示する方法」でも書きましたけど、HTML5のcanvasを使ってグラフを描く開発をしてます。 canvasは久しぶりにさわりましたけど、よく考えたらこれって結構使い勝手いいですよね。chart.jsがやってるみたいに可変的に画像を変更できますし、速度も遅くはありませんので。 で、その後キャンバスを画像で保存する必要がでてきたんで色々と探ってみた結果、なんと（DL部分は）たった８行で実現できることが分かったんで、シェアをしたいと思います。（しかもあのにっくきインターネットエクスプローラーでも動きますよ！） ダウンロード・サンプル いきなり完成版コード 今回はコードが少ないんで先に完全版コードから紹介します。 なお、ネイティブJavaScript で書いてます。 つまり、jQueryを使ってなくてもOKですし、あなたがReactフリ
quadraticCurveTo() メソッド - Canvasリファレンス - HTML5.JP
構文 context . quadraticCurveTo(cpx, cpy, x, y) 現在のパスに指定の地点を加え、指定の制御点を伴う二次ベジェ曲線によって、直前の地点と接続します。 仕様 quadraticCurveTo(cpx, cpy, x, y) メソッドは、(cpx, cpy) に対するサブパスを定義し、それから、サブパスの終点を、制御点 (cpx, cpy) を伴う二次ベジェ曲線を使って、指定地点 (x, y) と結ばなければいけません。そして、指定地点 (x, y) をサブパスに加えなければいけません。[BEZIER] 原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-quadraticcurveto サンプル このサンプルでは、左上の (10, 10) を始点とし、制御点が (50,
HTML5 Canvasで角丸四角を描いて、グラーデーションで塗り潰してみた
Canvasでチャートを作成していた時に、背景やらグラフの帯やらで角丸四角をたくさん描画する必要があったので、共通化して１つの関数にまとめましたので紹介していきます。 サンプル 作ろうとしているものがこちらになります。 「サイズ」「色」等のパラメータを変更すると、角丸四角が生成されるので試してみてください。 これより、このサンプルの実装方法について紹介していきます。 各種ファイルを準備 以下のようにファイルを準備します。 ┣ index.html ┗ js ┗ main.js index.htmlの記述 index.htmlは以下のように記述しておきます。 【index.html】 <html> <head> <meta charset="utf-8"> <script src="js/main.js"></script> </head> <body> <div> <canvas id="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
