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会在表盘的视口外部渲染/绘制，因为它不可见。

我认为最好使用canvas fillText 命令在画布上打印日期。

尝试以下示例。

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.

Tizen SDK CSS ID未呈现

1 个答案: