CX's VBScript Diary

 | 

2013-02-28

cx2020130228

VBScript + HTA(HTML Application)で Canvas を使う方法

04:58 | VBScript + HTA(HTML Application)で Canvas を使う方法 - CX's VBScript Diary を含むブックマーク はてなブックマーク - VBScript + HTA(HTML Application)で Canvas を使う方法 - CX's VBScript Diary

IE9/10 環境であっても、HTA のドキュメント互換モードがレガシーな設定となっている為、既定では HTML5Canvas 機能が使用できません。

ただし、互換モード(X-UA-Compatible)を明示的に「IE=edge」(最新のモード※)と指定することで、Canvas が使えるようになります。

(※IE11以降ではVBScriptが利用不可な為、「IE=10」のようにバージョンを指定する必要があります。)

<meta http-equiv="X-UA-Compatible" content="IE=edge">

実行環境とドキュメント互換モードの関係

実行環境 / 互換モード既定IE=edgeIE=9IE=10IE=11
IE99.09.09.09.09.0
IE1010.010.09.010.010.0
IE1111.011.09.010.011.0
IE9+HTA7.09.09.09.09.0
IE10+HTA7.010.09.010.010.0
IE11+HTA7.011.09.010.011.0

ドキュメントモードとHTAで利用可能な機能の関係

ドキュメントモードHTA:Application オプションVBScriptJavaScriptCanvasWebGL
7.0××
9.0××
10.0××
11.0××

以下、Canvas 機能を利用した描画サンプルです。

サンプル

<html>
<head>
<title>Hello, Canvas World!</title>
<!-- IE9/10 で Canvas を使用する場合 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- IE11 以上で Canvas を使用する場合 -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=10"> -->
<script type="text/vbscript">
Option Explicit
Const PI = 3.14159265358979
Const X_MAX = 640
Const Y_MAX = 480
Const R = 240
window.resizeTo X_MAX + 40, Y_MAX + 60

Sub Draw() 
    Dim canvas
    Set canvas = document.getElementById("Canvas")
    Dim ctx
    Set ctx = canvas.getContext("2d")
    Call DrawScreen( ctx )
    Call DrawGraph( ctx )
    Call DrawSin( ctx )
End Sub

Sub DrawScreen( ctx ) 
    ctx.fillStyle = "rgb( 0, 0, 0 )"
    ctx.fillRect 0, 0, X_MAX, Y_MAX
End Sub

Sub DrawGraph( ctx ) 
    ctx.strokeStyle = "rgb( 0, 127, 0 )"
    ctx.beginPath
    Dim x, y
    For x = 0 To X_MAX Step 20
        ctx.moveTo x, 0
        ctx.lineTo x, Y_MAX
    Next
    For y = 0 To Y_MAX Step 20
        ctx.moveTo 0, y
        ctx.lineTo X_MAX, y
    Next
    ctx.stroke
End Sub

Sub DrawSin( ctx ) 
    ctx.strokeStyle = "rgb( 0, 255, 0 )"
    ctx.beginPath
    ctx.moveTo 0, R
    Dim x, y
    For x = 0 To X_MAX Step 20
        y = R - R * Sin( 2 * PI * ( x / X_MAX ) )
        ctx.lineTo x, y
    Next
    ctx.stroke
End Sub
</script>
</head>
<body onload="Draw()">
<canvas id="Canvas" width="640" height="480"></canvas>
</body>
</html>
 |