tetsuyanbo

JavaScriptメモ canvasタグを使って四角形を描いてみる

2013/08/28 -JavaScript
canvas, fillRect, fillStyle, firefox, getContext, getElementById, HTML5, JavaScript, コンテキスト, ブラウザ, プログラミング, 四角形, 塗りつぶし, 描画

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            // 四角形を描く
            function draw() {
                // canvas要素を取得する
                var canvas = document.getElementById('draw');
                if(!canvas.getContext) {
                    // 取得できなかった場合は終了する
                    return;
                }
                // 2D用の描画コンテキストを取得する
                var context = canvas.getContext('2d');
                if(!context) {
                    // 取得できなかった場合は終了する
                    return;
                }
                // 桃色に塗りつぶすように色を設定する
                context.fillStyle = 'rgb(255,155,255)';
                // 四角形を描く
                context.fillRect(10,10,90,90);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas id="draw"></canvas>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!doctype html>

<html>

<head>

// 四角形を描く

function draw() {

// canvas要素を取得する

var canvas = document.getElementById('draw');

if(!canvas.getContext) {

// 取得できなかった場合は終了する

return;

}

// 2D用の描画コンテキストを取得する

var context = canvas.getContext('2d');

if(!context) {

// 取得できなかった場合は終了する

return;

}

// 桃色に塗りつぶすように色を設定する

context.fillStyle = 'rgb(255,155,255)';

// 四角形を描く

context.fillRect(10,10,90,90);

}

</script>

</head>

</body>

</html>

ポイントはこんな感じ ...

-->

JavaScriptメモ jQuery IUを使ってinputタグに入力の候補を表示してみる

JavaScriptメモ onClickでクリックしたことを気づかせてみる

Mac OS Xでいまさらながら "Internet Explorer"を使ってみる

JavaScriptメモ Safariでスクリプトのエラーを表示してみる

2011/04/09 -JavaScript, プログラミング
Apple, HTML, JavaScript, Mac OS X, safari, アップル, エラー, スクリプト, デバッグ, ブラウザ, プログラミング, マック, 実行, 表示

JavaScriptメモ Shiftキーが押されたことを調べてみる

2011/03/29 -JavaScript, プログラミング
event, firefox, HTML, JavaScript, onkeydown, safari, shift, shiftKey, Window, イベント, キー, シフト, スクリプト, スクリプトエラー, ダイアログ, 言語

「JavaScript」 一覧

「JavaScript」一覧