globalCompositeOperation = "合成方法"－Canvasリファレンス
指定できる値は上記の通りで、これら以外の値を指定しても原則として無視されます。 ただし、ブラウザベンダーによって拡張機能が追加されることがあるかもしれません。 その場合のキーワードの書式は「ベンダー名-機能名」となると定義されています。 現在のところ、FirefoxとGoogle Chrome・Safariでは、一部キーワードの解釈が異なるようです。 また、IE9はglobalCompositeOperation属性をサポートしていないようです。 ■引数（値）の説明 source-atop 現在イメージの領域のみが描画される。重なった部分は新規イメージとなる。 source-in 重なった領域のみが描画される。重なった部分は新規イメージとなる。 source-out 新規イメージの領域のみが描画される。重なった部分は描画されない。 source-over 両方のイメージの領域が描画される。
合成とクリッピング - Web API | MDN
« 前のページ 次のページ » これまでの例ではすべて、図形は、常に 1 つずつ重ねて描かれていました。これはほとんどの状況において十分すぎるほど適切ですが、複合図形の構築順序が制限されます。しかし、 globalCompositeOperation プロパティを設定することで、この動作を変更することができます。さらに、 clip プロパティによって、シェイプの不要な部分を隠すことができます。 既存の図形の背後に新しい図形を描画できるだけでなく、特定の領域をマスクしたり、キャンバスの一部を消去したり（clearRect() メソッドのように矩形に限定しない）、その他にも使用することが可能です。 globalCompositeOperation = type これは、新しい図形を描くときに適用する合成処理の種類を設定します。 type は、 12 種類の合成処理から使用するものを特定する文字
[69-10] Canvasの描画の状態を保存・復元する save() と restore()
[69-10] Canvasの描画の状態を保存・復元する save() と restore() 最終更新日：2019年02月06日 （初回投稿日：2015年02月16日） 前回の「[69-9] Canvasでグラフィックスの変形をしよう」で、1度指定した変形は初期化のソースを書かない限り、ずっと継承することがわかりました。 変形だけでなく、Canvas では、線や塗り、透明度、フォントの指定などの描画の状態は、一度指定したらずっとそのまま変わらないという特徴がありますね。 今回はこのような描画の状態を一時保存したり、それを必要なタイミングで呼び出して復元するメソッド、save() と restore() を使ってみます。 これは、複雑な図形や 描画を何度も繰り返すアニメーションなどを作る場合に大事になってきます。 今回のサンプルはこちらです。 save() と restore() 前回の「
![[69-10] Canvasの描画の状態を保存・復元する save() と restore()](https://cdn-ak-scissors.b.st-hatena.com/image/square/0369ecd9c29f6086e78d26a2468f5f731f42a00a/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-110-origin.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Fogp_image.jpg)
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
)
SVG vs canvas: how to choose (Windows)
In the previous table, think of a mental model of the two in terms of existing software. Canvas resembles MSPaint, where you can draw and create images by using shapes and other tools. SVG resembles a Office PowerPoint slide that has programmable support and the ability to add a theme. When to Use <canvas> and when to Use SVG: The Scenarios This section describes the technical benefits and limitat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
