ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 タグ

<!-->
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML5 canvas globalCompositeOperation 属性

HTML5 track Tag Reference HTML5 canvas リファレンス

2つの異なる globalCompositeOperation 値を使用して矩形を描画します:

source-over
destination-over
あなたのブラウザは canvas タグをサポートしていません。

JavaScript:

...
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="source-over";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(180,50,75,50);

Try it yourself »

定義と用法

globalCompositeOperation 属性は、図形や図面をキャンバスに配置する方法を指定します。

11の異なる配置の値がありますが、このページの下部にあるそれらのすべてを表示します。

デフォルト値: source-over
JavaScript 構文: context.globalCompositeOperation="source-in";


ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

globalCompositeOperation 属性は、主要な全ブラウザがサポートしています。


属性値

注: 以下の説明では、既にキャンバス上に配置されている図面は、描画先といい、 キャンバス上に配置しようとしている図面は、ソースといいます。

説明 Play it
source-atop 描画先が表示され、ソース描画先の共通部分だけの上にソースが表示される Play it »
source-in ソース描画先の共通の配置部分だけの、ソースが表示され、描画先は表示されない Play it »
source-out ソースだけが配置される場所だけの、ソースのみが表示され、描画先は表示されない。 Play it »
source-over デフォルト。描画先の上に、ソースが通常どおり表示される Play it »
destination-atop ソースが表示され、ソース描画先の共通部分だけの上に描画先が表示される Play it »
destination-in ソース描画先の共通の配置部分だけの、描画先が表示され、ソースは表示されない Play it »
destination-out 描画先だけが配置される場所だけの、描画先のみが表示され、ソースは表示されない。 Play it »
destination-over 描画先の上に、ソース描画先の双方が表示される Play it »
lighter ソース描画先の共通の配置部分だけの、ソース描画先双方が表示される。 色は、ソースの色と、描画先の色の合計として表示される Play it »
copy ソースのみが表示され、描画先は表示されなし Play it »
xor ソース描画先の双方が配置されていない部分だけの、ソース描画先が表示される Play it »

すべてのglobalCompositeOperation 属性値:


Try it yourself »

HTML5 track Tag Reference HTML5 canvas リファレンス