Tizen Developers

var canvas = null,

    context = null,

    centerX = document.width / 2,

    centerY = document.width / 2;

function roundRectanglePath(rect,radius,color) {

    context.beginPath();

    context.fillStyle = color;

    context.moveTo( rect.getX()+radius,rect.getY() );

    context.lineTo( rect.getRight()-radius,rect.getY() );

    context.arc( rect.getRight()-radius,rect.getY()+radius, radius, 3*Math.PI/2,2*Math.PI, false);

    context.lineTo( rect.getRight(),rect.getBottom()-radius);

    context.arc( rect.getRight()-radius,rect.getBottom()-radius, radius, 0, Math.PI/2, false);

    context.lineTo( rect.getX()+radius,rect.getBottom() );

    context.arc( rect.getX()+radius,rect.getBottom()-radius, radius, Math.PI/2, Math.PI, false);

    context.lineTo( rect.getX(),rect.getY()+radius);

    context.arc( rect.getX()+radius,rect.getY()+radius, radius,Math.PI, 3*Math.PI/2, false);

    context.fill();

    context.closePath();

}

function Rect(x,y,width,height){

    this.x = x;

    this.y = y;

    this.width = width;

    this.height= height;

}

Rect.prototype.getX = function() {

    return this.x;

}

Rect.prototype.getY = function() {

    return this.y;

}

Rect.prototype.getWidth = function() {

    return this.width;

}

Rect.prototype.getHeight = function() {

    return this.height;

}

Rect.prototype.getLeft = function() {

    return this.x;

}

Rect.prototype.getTop = function() {

    return this.y;

}

Rect.prototype.getRight = function() {

    return (this.x + this.width);

}

Rect.prototype.getBottom = function() {

    return (this.y + this.height);

}

function drawWatch() {

    var datetime = tizen.time.getCurrentDateTime(),

        hour = datetime.getHours(),

        minute = datetime.getMinutes();

    hour = hour + (minute / 60);

    hour = hour > 12 ? hour - 12 : hour;

    context.save();

    context.translate(centerX,centerY);

    context.rotate(hour * 30 * Math.PI / 180);

    context.rotate(180 * Math.PI / 180);

    var hrec = new Rect(-8,-3,17,82);

    roundRectanglePath(hrec,8,"#8ac48a");

    context.translate(-centerX,-centerY);

    context.restore();

    context.save();

    context.translate(centerX,centerY);

    context.rotate(minute * 6 * Math.PI / 180);

    context.rotate(180 * Math.PI / 180);

    var mrec = new Rect(-8,-3,17,143);

    roundRectanglePath(mrec,8,"#648665");

    context.translate(-centerX,-centerY);

    context.restore();

}

function drawBackgroundImage(){

    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    //背景

    var backgroundImage = new Image();

    backgroundImage.src = "image/background.png";

    backgroundImage.onload = function(){

        context.clearRect(0, 0, context.canvas.width, context.canvas.height);

        context.save();

        context.drawImage(backgroundImage,0,0);

        context.restore();

    };

    drawWatch();

}

window.onload = function() {

    canvas = document.querySelector("#myCanvas");

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

    // Set a canvas square

    canvas.width = document.width;

    canvas.height = canvas.width;

    drawBackgroundImage();

    // add eventListener for tizenhwkey

    window.addEventListener('tizenhwkey', function(e) {

        if (e.keyName === 'back') {

            tizen.application.getCurrentApplication().exit();

        }

    });

    // add eventListener to update the screen immediately when the device wakes up

    document.addEventListener("visibilitychange", function() {

        if (!document.hidden) {

            drawBackgroundImage();

        }

    });

};