Tizen H5 Canvas rotate on gear s2 device

Tizen H5 Canvas rotate on gear s2 device

BY 25 Feb 2016 Web Application Development

I draw a watchface,  minute hand the center of rotation of the watchface.    I do not want to rotate the number of minutes.

thanks

<!DOCTYPE html>
<html>
<canvas id=”myCanvas” width=”360″ height=”360″ style=”border:1px solid #d3d3d3;”>
</canvas>

<script>
  var c=document.getElementById(“myCanvas”);
  var ctx=c.getContext(“2d”);
  var cycleCenterX = null;
  var cycleCenterY = null;

  function roundRectanglePath(rect,radius,color,minte) {
      cycleCenterX = rect.getX()+rect.getWidth()/2;
      cycleCenterY = rect.getY()+rect.getHeight()/2;

      ctx.beginPath();
      // context.strokeStyle = ‘red’;
      ctx.fillStyle = color;
      ctx.moveTo( rect.getX()+radius,rect.getY() );
      ctx.lineTo( rect.getRight()-radius,rect.getY() );
      ctx.arc( rect.getRight()-radius,rect.getY()+radius, radius, 3*Math.PI/2,2*Math.PI, false);
      ctx.lineTo( rect.getRight(),rect.getBottom()-radius);
      ctx.arc( rect.getRight()-radius,rect.getBottom()-radius, radius, 0, Math.PI/2, false);
      ctx.lineTo( rect.getX()+radius,rect.getBottom() );
      ctx.arc( rect.getX()+radius,rect.getBottom()-radius, radius, Math.PI/2, Math.PI, false);
      ctx.lineTo( rect.getX(),rect.getY()+radius);
      ctx.arc( rect.getX()+radius,rect.getY()+radius, radius,Math.PI, 3*Math.PI/2, false);
      ctx.fill();
      // context.stroke();
      ctx.closePath();

      ctx.font = ’40px Arial’;
      ctx.textAlign = ‘center’;
      ctx.textBaseline = ‘middle’;
      // ctx.fillStyle = ‘#1FB8EC’;
      ctx.fillStyle = ‘blue’;
      ctx.fillText(minte, cycleCenterX, cycleCenterY);
  }

  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);
  }


  var minte = 15;
  var bgimg = new Image();
  bgimg.src = “watch1.png”;

  bgimg.onload = function(){
      ctx.drawImage(bgimg,0,0);
    // setInterval(function(){
    // ++minte;
      ctx.save();
      ctx.translate(180,180);
      ctx.rotate(minte * 6 * Math.PI / 180);
      ctx.rotate(180 * Math.PI / 180);
      var mrec = new Rect(-32,90-20,64,64);
      roundRectanglePath(mrec,33,’#FF0000′,minte);
      ctx.translate(-180,-180);
      ctx.restore();
    //     if (minte==60) {
    //       minte=1;
    //     }
    // },100);
  };
</script>
</html>

 

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More