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メモ jQueryを使ってみる

2013/05/21 -JavaScript, プログラミング
1.x, 2.x, div, firefox, HTML, IE, IE8, Internet Explorer, JavaScript, jQuery, Mac, エクスプローラ, スクリプト, ブラウザ, プログラミング, マック, ライブラリ, 属性

JavaScriptメモマウスのカーソルのアイコンを変えてみる

2011/04/24 -JavaScript, プログラミング
Apple, HTML, JavaScript, Mac, safari, アイコン, アップル, カーソル, サファリ, スクリプト, ブラウザ, プログラミング, マック, 表示

<script type="text/javascript">
	<!-- function over() { document.body.style.cursor = "hand"; } function out() { document.body.style.cursor = "default"; } -->
	</script>
<div>over</div>

1

2

3

4