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

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

小さな矩形と大きさが5倍の矩形を描画し、再度同じ矩形を描画します:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(5,5);
ctx.strokeRect(5,5,25,15);

Try it yourself »

定義と用法

scale メソッドは、図面を大きくしたり小さくしたりします。

2つのパラメータを使用し、幅または高さ、または両方を伸縮することができます

幅と高さの両スケールが (2,2) の場合、指定した幅と高さが 2倍 で描画されます。

また、位置も伸縮します。スケールが (2,2) の場合、キャンバスの左上か2倍離れたところへ配置されます。

JavaScript 構文: context.scale(x,y);


ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

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


パラメータ値

パラメータ 説明 Play it
x width スケーリングする幅。 1= スケーリングなし、0.5= 半分のサイズ、2= 2倍のサイズなど Play it »
y height スケーリングする高さ。 1= スケーリングなし、0.5= 半分のサイズ、2= 2倍のサイズなど Play it »

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