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

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

円の 3/4 を描画します:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0*Math.PI,1.5*Math.PI);
ctx.stroke();

Try it yourself »

定義と用法

arc メソッドは、円に沿って描画します。

サイズ、位置、および描画する円の一部を 6 つのパラメータを使用して指定します。

キャンバスに円弧を描画するには、fill() または stroke() メソッドを使用します。


Startangle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Endangle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Center
arc(100,75,50,0*Math.PI,1.5*Math.PI)


JavaScript 構文: context.arc(x,y,r,sAngle,eAngle,clockwise);


ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

arc メソッドは、Opera ではサポートしていません。


パラメータ値

パラメータ 説明 Play it
x x-coordinate 円の中心の x 座標 Play it »
y y-coordinate 円の中心の y 座標 Play it »
r radius 円の半径 Play it »
sAngle number 描画を開始する円の角度を指定する Play it »
eAngle number 描画を終了する円の角度を指定する Play it »
clockwise true/false 任意。時計回りに描画するかどうかを指定する Play it »

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