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

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

矩形を 20 度回転させます:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,50,100,50);

Try it yourself »

定義と用法

rotate メソッドは、キャンバスを回転します。

回転は、キャンバスの位置 0,0 からの角度で行われます:

rotate メソッドは、1つのパラメータ radian をとります。

パラメータはラジアンを使用して、回転の度数を決定します。

度からラジアンへの変換するには、次の式を使用します:度数 * PI / 180

20°: 20 * PI / 180 = 0.35

回転は、回転が行われ後に作られる図面に影響を与えます。

JavaScript 構文: context.rotate(angle);


ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

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


パラメータ値

パラメータ 説明 Play it
angle angle 指定の角度にキャンバスを回転する Play it »

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