CX's JavaScript Diary

 | 

2013-02-27HTA(HTML Application)で Canvas を使う方法 このエントリーを含むブックマーク

cx2020130227

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

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

(2013.04.28 追記:IE10 モードにすると HTA:Application オプションが効かなくなるとのこと。)

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

■ Tech babble | HTA with HTML5 elements

http://blog.roth-russell.com/post/HTA-with-HTML5-elements.aspx

以下、サンプルです。

<html>
<title>Hello, Canvas World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
var X_MAX = 640;
var Y_MAX = 480;
var R = 240;
window.resizeTo(X_MAX + 40, Y_MAX + 60);

function draw() {
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    drawScreen( ctx );
    drawGraph( ctx );
    drawSin( ctx );
}

function drawScreen( ctx ) {
    ctx.fillStyle = "rgb( 0, 0, 0 )";
    ctx.fillRect( 0, 0, X_MAX, Y_MAX );
}

function drawGraph( ctx ) {
    ctx.strokeStyle = "rgb( 0, 127, 0 )";
    ctx.beginPath();
    var x, y;
    for (x = 0; x <= X_MAX; x += 20) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, Y_MAX);
    }
    for (y = 0; y <= Y_MAX; y += 20) {
        ctx.moveTo(0, y);
        ctx.lineTo(X_MAX, y);
    }
    ctx.stroke();
}

function drawSin( ctx ) {
    ctx.strokeStyle = "rgb( 0, 255, 0 )";
    ctx.beginPath();
    ctx.moveTo(0, R);
    var x, y;
    for (x = 0; x <= X_MAX; x += 20) {
        y = R - R * Math.sin( 2 * Math.PI * ( x / X_MAX ) )
        ctx.lineTo(x, y);
    }
    ctx.stroke();
}
</script>
<body onload="draw()">
<canvas id="Canvas" width="640" height="480"></canvas>
</body>
</html>
 |