css - 未呈现 Tizen SDK CSS ID

Question

我正在为可穿戴设备使用 Tizen 2.3.1 SDK，但遇到了一个问题，无论我对 style.css 文件做什么，添加任何新 ID 都无法正常工作。

* {
    margin: 0;
    padding: 0
}

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
}

#str_day {
    position: absolute;
    display: -webkit-flex;
    width: 50%;
    height: 50%;
    background: yellow;
    color: yellow;
    z-index: 4;
    opacity: 1;
}

h1 {
    font-size: 1.4em;
    margin: 10px 0 20px 10px;
    color: #6587ac;
}

#box {
    display: -webkit-flex;
    -webkit-align-items: center;
    width: 100%;
    height: 100%
}

.canvas {
    background: #000;
    width: 320px;
    height: 320px;
    margin: auto;
}

这是我的代码。我正在尝试添加 str_day id，但是当我通过模拟器运行包时它没有显示。其余的 css(主要是 canvas 元素)工作正常，但 str_day 只是没有显示。我尝试指定 z-index 和 opacity 以防出现一些奇怪的问题，但这似乎不是问题所在。

这是我在github上的完整代码。

https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187b6b3679e02416548e18a3e986e

Answer 1

可能是因为 CSS 布局不当，str_day 被渲染/绘制在表盘视口(viewport)之外，因此它不可见。

我认为更好的方法是使用 canvas fillText 命令在 Canvas 上打印日期。

试试下面的例子。

var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.