ホーム 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 createRadialGradient メソッド

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

赤のグラデーションで塗りつぶした円を描画します:

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

JavaScript:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var grd=ctx.createRadialGradient(100,50,5,60,50,50);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);

Try it yourself »

定義と用法

createRadialGradient メソッドは、指定のパラメータを使用して、円形のグラデーションオブジェクトを作成します。

x0 と y0 は、半径が r0 の、開始円の中心座標を表します。

x1 と y1 は、半径が r1 の、終了円の中心座標を表します。

色の指定とグラデーションにおけるその色の配置場所は addColorStop() メソッド を使用します。

gradient can be used to draw/fill rectangles, circles, lines etc.

JavaScript 構文: context.createRadialGradient(x0,y0,r0,x1,y1,r1);


ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

createRadialGradient メソッドは、主要な全ブラウザがサポートしています。


パラメータ値

パラメータ 説明
x0 グラデーションを開始する円の x 座標
y0 グラデーションを開始する円の y 座標
r0 グラデーションを開始する円の半径
x1 グラデーションを終了する円の x 座標
y1 グラデーションを終了する円の y 座標
r1 グラデーションを終了する円の半径


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