Wie kann ich die HTML5 Canvas auch im IE9 erzeugen?

Question

Hallo,

 Ich habe eine kleine Webapplikation die eine HTML5 Canvas zeichnet. Wenn ich die Seite über die lokale Entwicklungsumgebung aufrufe läuft alles ganz normal. 

Auf dem Webserver gehts dann aber nicht mehr, aber nur nicht im IE9, im Chrome und im FF geht die Seite wie gewünscht.

Hat jemand eine Idee was ich flasch mache?

Gruß,
Marko

function paintColorCodes(min, max) {
    var cc = document.getElementById("color-codes");
    if (cc != null) {
        var diff = max - min;
        var step = diff / 10;
        cc.innerHTML = min + '<br />';
        for (var i = 0; i < 10; i++) {
            var id = "square-" + i;
            cc.innerHTML += '<canvas id="square-' + i + '" width="20" height = "20"></canvas><br />';
        }
        cc.innerHTML += max;

        for (var i = 0; i < 10; i++) {
            var id = "square-" + i;
            var c = document.getElementById(id);
            var context = c.getContext("2d");

            var topLeftCornerX = 1;
            var topLeftCornerY = 1;
            var width = 18;
            var height = 18;

            context.beginPath();
            context.rect(topLeftCornerX, topLeftCornerY, width, height);
            context.fillStyle = colorCodes[i];
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();
            context.closePath();
        }
    }
}

Answer 1

Hallo mkeuschn,

die folgenden Links können Ihnen helfen Ihr Problem zu lösen. Unter [1] finden Sie die Informationen zu erstellung von HTML5 Anwendungen. Weitere Informationen zur Canvas-Unterstützung in Internet Explorer 9 finden Sie im Entwicklerhandbuch zu IE9 [2].

[1] http://msdn.microsoft.com/de-de/magazine/hh708752.aspx
[2] http://msdn.microsoft.com/de-de/ie/ff468705

Viele Grüße,
Anna Koch
MSDN Hotline für MSDN Online Deutschland

Disclaimer:
Bitte haben Sie Verständnis dafür, dass wir hier auf Rückfragen gar nicht oder nur sehr zeitverzögert antworten können.
Bitte nutzen Sie für Rückfragen oder neue Fragen den telefonischen Weg über die MSDN Hotline:http://www.msdn-online.de/Hotline


Es gelten für die MSDN Hotline und dieses Posting dieseNutzungsbedingungen, Hinweise zuMarkenzeichen sowie die allgemein gültigenInformationen zur Datensicherheit sowie die gesondertenNutzungsbedingungen für die MSDN Hotline.

Answer 2

Hi,

das was Du hier postest, ist JavaScript ... läuft also im Client und hat mit dem verwendeten Webserver nichts zu tun. Wenn es daran liegen sollte, fallen mir gerade nur unterschiedliche Sicherheitseinstellungen für's scripting für "localhost" (= Cassini oder IIS Express) und "Internet" ein. Oder der Fehler liegt in nicht gepostetem Code.

Hast Du die Entwicklertools schon 'befragt' und dort Firefox und IE verglichen?

Gruß
Jürgen

PS: @Anna: der Link[1] liefert ein "Inhalt nicht gefunden"

Answer 3

Hallo,

Welche Entwicklertools meinst denn?

Gruß,

Marko

Hier mal das ganze Java Script File:

var canvasXSize;
var canvasYSize;
var colorCodes = new Array("#FF0000", "#FFB200", "#FFCC7F", "#FFFF66", "#CCFF99", "#66FF66", "#00CC33", "#7FB2FF", "#0000FF", "#3300B2", "#EFEEEF");

// Filetree
function back2forward(dataStr) {
    return dataStr.replace(/\\/g, "/");
}

$(document).ready(function () {
    var fileTree = document.getElementById("fileTree");
    if (fileTree != null) {
        $('#fileTree').fileTree(
            {
                root: '/',
                script: '/Home/FileStructure'
            },
            function (file) {
                var wc = document.getElementById("wafer-canvas");
                wc.rel = file;
                buildMainContent(file);
            }
        );
    }
});

function radioButtonOnClick() {
    var wc = document.getElementById("wafer-canvas");
    if (wc.rel != null) {
        buildMainContent(wc.rel);
    }
}

// find another event, to avoid this function call when canvas is not in HTML source
function buildMainContent(filename) {
    var canvas = document.getElementById("wafer-canvas");
    if (canvas != null) {
        var jsonData = '{"filename": "' + filename.replace(/\\/g, "/") + '" }';

        var measurementType = "";
        for (var i = 0; i < document.mt.measurementType.length; i++) {
            if (document.mt.measurementType[i].checked) {
                measurementType = document.mt.measurementType[i].value;
            }
        }

        // get data from Server
        jQuery.ajax({
            type: "POST",
            url: "/Home/Data",
            data: jsonData,
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                // paste vules into html
                var common_content = document.getElementById("common-measurement-content");
                common_content.innerHTML = '<table id="measurement-table">' +
                '<tr><td>Comment:</td><td>' + result.comment + '</td></tr>' +
                '<tr><td>Operator:</td><td>' + result.oper + '</td></tr>' +
                '<tr><td>Sample:</td><td>' + result.sample + '</td></tr>' +
                '<tr><td>Filename:</td><td>' + result.filename + '</td></tr>' +
                '<tr><td>Bias:</td><td>' + result.bias + ' Volt</td></tr>' +
                '<tr><td>Contact:</td><td>' + result.contact + '</td></tr>' +
                '<tr><td>Raster:</td><td>' + result.raster + '</td></tr>' +
                '<tr><td>Type:</td><td>p - ' + result.type + ' Ohm cm</td></tr>' +
                '<tr><td>Thickness:</td><td>' + result.thickness + ' um</td></tr>' +
                '<tr><td>Lasertype:</td><td>' + result.lasertype + ' nm (' + result.laserColor + ')</td></tr>' +
                '<tr><td>PhotoCurr:</td><td>' + result.photoCurrent + ' uA</td></tr>' +
                '<tr><td>Diameter:</td><td>' + result.diameter + '</td></tr>' +
                '</table>';

                var width = 0; height = 0;
                switch (result.diameter) {
                    case "6\"":
                        width = 5;
                        height = 5;
                        break;
                    case "8\"":
                        width = 4;
                        height = 4;
                        break;
                    default:
                        alert("Wafer diameter not available! Path to measurment file: " + 
                            filename.replace(/\\/g, "/") + 
                            ".\nFile name from request: " +
                            result.filename + ".\nServer exception: " +
                            result.serverException);
                        break;
                }

                switch (measurementType) {
                    case "diffusionCurrent":
                        diffusionCurrentMeasurement(result);
                        // diffusionCurrentWaferCanvas(result, width, height);
                        waferCanvas(result, width, height, measurementType);
                        break;
                    case "diffusionLength":
                        diffusionLengthMeasurement(result);
                        // diffusionLengthWaferCanvas(result, width, height);
                        waferCanvas(result, width, height, measurementType);
                        break;
                    case "lifetime":
                        lifeTimeMeasurement(result);
                        // lifetimeWaferCanvas(result, width, height);
                        waferCanvas(result, width, height, measurementType);
                        break;
                    default:
                        alert("Error in measurement kind selection!");
                        break;
                }
            },
            error: function (error) {
                alert("There was an error posting the data to the server: " + error.responseText);
            }
        });
    }
}

function diffusionCurrentMeasurement(result) {
    var measurement = document.getElementById("measurement");
    measurement.innerHTML = '<table id="measurement-values">' +
        '<tr><th colspan="2">Data from Scan</th></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Diffusion Current</td></tr>' +
        '<tr><td>Average:</td><td>' + result.avgDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Deviation:</td><td>' + result.devDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Dark Current</td></tr>' +
        '<tr><td>Average:</td><td>' + result.avgDarkCurrent + ' uA</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDarkCurrent + ' uA</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDarkCurrent + ' uA</td></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Photo Current</td></tr>' +
        '<tr><td>Average</td><td>' + result.photoCurrent + ' uA</td></tr>' +
        '</table>';
}

function diffusionLengthMeasurement(result) {
    var measurement = document.getElementById("measurement");
    measurement.innerHTML = '<table id="measurement-values">' +
        '<tr><th colspan="2">Data from Scan</th></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Diffusion Length</td></tr>' +
        '<tr><td>Average:</td><td>' + result.avgDiffusionLength + ' um</td></tr>' +
        '<tr><td>Deviation:</td><td>' + result.devDiffusionLength + ' um</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDiffusionLength + ' um</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDiffusionLength + ' um</td></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Dark Current</td></tr>' +
        '<tr><td>Average:</td><td>' + result.avgDarkCurrent + ' uA</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDarkCurrent + ' uA</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDarkCurrent + ' uA</td></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Diffusion Current</td></tr>' +
        '<tr><td>Average</td><td>' + result.avgDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Deviation:</td><td>' + result.devDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDiffusionCurrent + ' uA</td></tr>' +
        '</table>';
}

function lifeTimeMeasurement(result) {
    var measurement = document.getElementById("measurement");
    measurement.innerHTML = '<table id="measurement-values">' +
        '<tr><th colspan="2">Data from Scan</th></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Life Time</td></tr>' +
        '<tr><td>Average:</td><td>' + result.avgLifetime + ' us</td></tr>' +
        '<tr><td>Deviation:</td><td>' + result.devLifetime + ' us</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minLifetime + ' us</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxLifetime + ' us</td></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Dark Current</td></tr>' +
        '<tr><td>Average:</td><td>' + result.avgDarkCurrent + ' uA</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDarkCurrent + ' uA</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDarkCurrent + ' uA</td></tr>' +
        '<tr><td colspan="2" id="measurement-values-second-heading">Diffusion Current</td></tr>' +
        '<tr><td>Average</td><td>' + result.avgDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Deviation:</td><td>' + result.devDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Minimum:</td><td>' + result.minDiffusionCurrent + ' uA</td></tr>' +
        '<tr><td>Maximum:</td><td>' + result.maxDiffusionCurrent + ' uA</td></tr>' +
        '</table>';
}

function waferCanvas(result, width, height, measurementType) {
    var canvas = document.getElementById("wafer-canvas");
    if (canvas != null) {
        var context = canvas.getContext("2d");
        var topLeftCornerX = 0, topLeftCornerY = 0;

        var xLength = result.xValue.length;
        var xSize = result.xLength;
        var yLength = result.yValue.length;
        var ySize = result.yLength;

        canvasXSize = xSize * width;
        canvasYSize = ySize * height;

        // Set canvas size
        canvas.width = canvasXSize;
        canvas.height = canvasYSize;

        // create 2 dimensional array
        var measurementMatrix = new Array(xSize);
        for (var i = 0; i < xSize; i++) {
            measurementMatrix[i] = new Array(ySize);
        }

        // array initialisation
        for (var x = 0; x < xSize; x++) {
            for (var y = ySize - 1; y >= 0; y--) {
                measurementMatrix[x][y] = -1;
            }
        }

        var min, max;
        switch (measurementType) {
            case "diffusionCurrent":
                // copy server data to client matrix
                for (var i = 0; i < xLength; i++) {
                    measurementMatrix[result.xValue[i]][result.yValue[i]] = result.diffusionCurrent[i];
                }
                min = result.minDiffusionCurrent - 1;
                max = result.maxDiffusionCurrent;
                break;
            case "diffusionLength":
                // copy server data to client matrix
                for (var i = 0; i < xLength; i++) {
                    measurementMatrix[result.xValue[i]][result.yValue[i]] = result.diffusionLength[i];
                }
                min = result.minDiffusionLength - 1;
                max = result.maxDiffusionLength;
                break;
            case "lifetime":
                // copy server data to client matrix
                for (var i = 0; i < xLength; i++) {
                    measurementMatrix[result.xValue[i]][result.yValue[i]] = result.lifetime[i];
                }
                min = result.minLifetime - 1;
                max = result.maxLifetime;
                break;
            default:
                alert("Error in measurement kind selection!");
                break;
        }
        paintColorCodes(min, max);

        var diff = max - min;
        var step = diff / 10;

        // paint grafic
        for (var x = 0; x < xSize; x++) {
            for (var y = ySize - 1; y >= 0; y--) {
                context.beginPath();
                context.rect(topLeftCornerX, topLeftCornerY, width, height);
                for (var i = 0; i < 10; i++) {
                    // if (measurementMatrix[x][y] >= min + i * step + 1 && measurementMatrix[x][y] <= min + (i + 1) * step) {
                    if (measurementMatrix[x][y] > min + i * step && measurementMatrix[x][y] <= min + (i + 1) * step) {
                        context.fillStyle = colorCodes[i];
                        context.fill();
                        context.lineWidth = 0;
                        context.strokeStyle = colorCodes[i];
                    } else if (measurementMatrix[x][y] < 0) {
                        context.fillStyle = colorCodes[10];
                        context.fill();
                        context.lineWidth = 0;
                        context.strokeStyle = colorCodes[10];
                    }
                }
                context.stroke();
                topLeftCornerY += height;
            }
            topLeftCornerY = 0;
            topLeftCornerX += width;
        }
        context.closePath();
    }
}

function paintColorCodes(min, max) {
    var cc = document.getElementById("color-codes");
    if (cc != null) {
        var diff = max - min;
        var step = diff / 10;
        cc.innerHTML = min + '<br />';
        for (var i = 0; i < 10; i++) {
            var id = "square-" + i;
            cc.innerHTML += '<canvas id="square-' + i + '" width="20" height = "20"></canvas><br />';
        }
        cc.innerHTML += max;

        for (var i = 0; i < 10; i++) {
            var id = "square-" + i;
            var c = document.getElementById(id);
            var context = c.getContext("2d");

            var topLeftCornerX = 1;
            var topLeftCornerY = 1;
            var width = 18;
            var height = 18;

            context.beginPath();
            context.rect(topLeftCornerX, topLeftCornerY, width, height);
            context.fillStyle = colorCodes[i];
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();
            context.closePath();
        }
    }
}

Hier dann der Code vom Controller:

[AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Data(string filename)
        {
            MeasurementData data = new MeasurementData();
            try
            {
                Parser parser = new Parser();
                string root = ConfigurationManager.AppSettings["dataRoot"];
                // parser.Parse(root + filename, data);
                parser.Parse(filename, data);
            }
            catch (Exception e)
            {
                String message = e.Message;
            }
            
            JsonResult retval = new JsonResult();
            retval.ContentEncoding = System.Text.Encoding.UTF8;
            retval.ContentType = "text/xValue-json";
            retval.Data = data;

            return retval;
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FileStructure(string dir)
        {
            string root = ConfigurationManager.AppSettings["dataRoot"];
            FileStructureData data = new FileStructureData(root);
            return Content(data.CreateHTMLData(dir));
        }

Answer 4

Hi,

schau mal in das Einstellungsmenü (das Zahnrad) im IE ... F12. Im Firefox gibt es Firebug.

Gruß
Jürgen

Answer 5

Hallo,

Also wenn ich den code über den Webserver ausführe dann bekomme ich bei folgender Ziele:

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

folgenden Fehler:

Microsoft JScript runtime error: Object doesn't support property or method 'getContext'

lokal gehts aber :-S

Gruß,

Marko

Answer 6

Hi,

sorry, ab hier muss ich passen. Das einzige, was mir hier (potenziell) noch als "Webserver-abhängig" auffällt, sind die JSONs. Sind die auf beiden Servern identisch? (Ist eventuell das Objekt mit der ID "wafer-canvas" kein Canvas, wenn es vom richtigen Webserver geladen wird)

Sonst musst Du auf Hilfe von jemandem hoffen, der sich mit den benutzten Techniken auskennt (was nicht bedeutet, dass meine Anmerkungen falsch sind ;-)).

Gruß
Jürgen

Answer 7

Hallo,

Danke für die Hilfe. Ich habs jetzt gefunden. Bei den Developer Tools hab ich gesehen das der Document Mode auf IE 7 gestellt war. Ich hab jetzt am Server unter den "HTTP Response Headers" einen Eintrag hinzugefügt der den Document Mode auf IE 9 stellt.

Name: X-UA-Compatible

Value: IE=EmulateIE9

Entry Type: Local

Bin mir zwar nicht sicher ob des nicht anders geht aber so läufts.

Gruß,
Marko

Document Compatibility Mode with IIS 7