canvas畫圓

時間 2019-11-24

標籤 canvas 畫圓简体版

原文原文鏈接

<!DOCTYPE html>html

<html>前端

<head>web

<title></title>工具

<style>開發工具

*{margin:0;padding:0;}rest

canvas{border:1px solid red;}htm

</style>ip

</head>開發

<body>

var can = document.getElementsByTagName("canvas")[0];

var con = can.getContext("2d");

function sb(){

//先畫一個基礎的圓

con.beginPath();

con.fillStyle="red";

con.arc(300,300,200,0,360,false);

con.fill()

//1.畫分鐘的刻度

con.beginPath();

con.lineWidth = 2;

for(var i=0;i<60;i++){

con.moveTo(300,300);

con.arc(300,300,200,6*i*(Math.PI/180),6*(i+1)*(Math.PI/180),false)

con.stroke();

}

con.closePath()

//2.覆蓋掉多餘的線

con.beginPath();

con.fillStyle="red";

con.arc(300,300,190,0,360,false);

con.fill();

con.closePath();

//3.畫時針的刻度

con.beginPath();

con.lineWidth = 5;

for(var i=0;i<12;i++){

con.moveTo(300,300);

con.arc(300,300,200,30*i*(Math.PI/180),30*(i+1)*(Math.PI/180),false)

con.stroke();

}

con.closePath()

//4.覆蓋掉多餘的線

con.beginPath();

con.fillStyle="red";

con.arc(300,300,190,0,360,false);

con.fill();

con.closePath();

//8.獲取時間；

var time = new Date();

var h = time.getHours();

var m = time.getMinutes();

var s = time.getSeconds();

//5.畫時針

con.beginPath();

con.lineWidth = 5;

con.moveTo(300,300);

con.arc(300,300,130,(30*h+m/2-90)*(Math.PI/180),(30*h+m/2-90)*(Math.PI/180),false)

con.stroke();

con.closePath();

//6.畫分針

con.beginPath();

con.lineWidth = 3;

con.moveTo(300,300);

con.arc(300,300,160,(6*m-90)*(Math.PI/180),(6*m-90)*(Math.PI/180),false)

con.stroke();

con.closePath();

//7.畫秒針

con.beginPath();

con.lineWidth = 1;

con.moveTo(300,300);

con.arc(300,300,200,(1*s-90)*(Math.PI/180),(1-90)*(Math.PI/180),false)

con.stroke();

con.closePath();

//畫一個圓中心

con.beginPath();

con.fillStyle="black";

con.arc(300,300,10,0,360,false);

con.fill();

con.closePath();

//給一個時鐘的文字時間

con.save();

con.translate(300,300)

var arr = [3,4,5,6,7,8,9,10,11,12,1,2];

con.beginPath();

con.fillStyle="black";

con.strokeStyle="black";

con.font="30px false";

con.textAlign="center";

con.textBaseline="middle";

// con.strokeText("lala",180*Math.cos(90*Math.PI/180),180*Math.sin(90*Math.PI/180))

for(var i=0;i<12;i++){

con.strokeText(arr[i],150*Math.cos(i*30*Math.PI/180),150*Math.sin(i*30*Math.PI/180))

// console.log(30*i-90)

}

con.closePath()

con.restore() ;

// console.log(Math.sin(30*Math.PI/180))

}

sb()

setInterval(sb,1000)

</script>

</body>

</html> 須要瞭解web前端更多課程代碼+素材+開發工具，加羣434623999

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。