Question

在下面的代码示例中，我使用的是在HTML5-canvas元素上绘制的图像。但是，在Chrome中测试时，它不会立即使图像居中。 IE没有问题（使用IE9）。当你使用Chrome中的开发者窗口选择DOM中的一个元素时，不知何故，它突然中心！它很难调试，因为你无法看到改变了什么：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>

    <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script>
    <script type="text/javascript">

        window.onload = function () {
            var stage = new Kinetic.Stage({
                container: "container",
                width: 578,
                height: 200
            });
            var layer = new Kinetic.Layer();

            var imageObj = new Image();
            imageObj.onload = function () {
                var image = new Kinetic.Image({
                    x: stage.getWidth() / 2 - 53,
                    y: stage.getHeight() / 2 - 59,
                    image: imageObj,
                    width: 106,
                    height: 118
                });

                // add the shape to the layer
                layer.add(image);

                // add the layer to the stage
                stage.add(layer);
                stage.draw();
            };
            imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
        };

    </script>

</head>

<body>

    <h1>Page 3</h1>
    <div style="text-align: center">
        <div id="container"></div>
    </div>

</body>

</html>

Answer 1

我修复了这个问题如下。使用Chrome Canary我能够点击DOM-canvas-elements而不需要重新定位元素（这似乎是Chrome中的一个错误）。添加的最后一个canvas-element未定位于css-position“relative”。这样做可以确保我在画布上绘制的选择变为居中，从而整个“画布”元素（使用KineticJS）。我需要使用jQuery动态设置css-position-property，如下所示：

$("#myContainerId canvas:last").css( "position", "relative" );

使用KineticJS在Google Chrome中居中显示canvas元素

1 个答案: