|
<!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>
|
