var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
let context = canvas.getContext('2d')
// 圆心取页面正中心
let posX = window.innerWidth / 2
let posY = window.innerHeight / 2
function createCanvas(){
canvas.width = window.innerWidth
canvas.height = window.innerHeight
posX = window.innerWidth / 2
posY = window.innerHeight / 2
createClock()
}
function clearCanvas(){
context.fillStyle = '#000000'
context.fillRect(0, 0, canvas.width, canvas.height)
}
window.addEventListener('resize', createCanvas, false)
createCanvas()
function createClock(){
let outRadius = 100 // 外表盘的半径
let innerRadius = 90 // 内表盘半径
context.beginPath()
context.arc(posX, posY, outRadius, 0, Math.PI * 2, false)
context.moveTo(posX + innerRadius, posY)
context.arc(posX, posY, innerRadius, 0, Math.PI * 2, false)
context.moveTo(posX + 5, posY)
context.arc(posX, posY, 5, 0, Math.PI * 2, false)
// 绘制时针
context.moveTo(posX, posY)
context.lineTo(posX, posY - 75)
// 绘制分针
context.moveTo(posX, posY)
context.lineTo(posX - 55, posY)
// 绘制秒针
context.moveTo(posX, posY)
context.lineTo(posX + 40, posY + 60)
context.closePath()
context.strokeStyle = '#ffffff'
context.stroke()
// 绘制表盘12个刻度数字
for(let i = 1; i < 13; i++ ){
let angle = 180 - 360 / 12 * i
let radians = angle * Math.PI / 180
let tX = Math.sin(radians) * innerRadius + posX
let tY = Math.cos(radians) * innerRadius + posY
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = '#ffffff'
context.fillText(i, tX, tY)
}
}
作者:流_年
链接:https://juejin.cn/post/6917928848868950024
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
// var Heart = function (x, y) {
// this.x = x;
// this.y = y;
// this.vertices = [];
// for (let i = 0; i < 30; i++) {
// var step = i / 30 * (Math.PI * 2);//设置心上面两点之间的角度,具体分成多少份,好像需要去试。
// var vector = {
// x: (15 * Math.pow(Math.sin(step), 3)),
// y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
// }
// this.vertices.push(vector);
// }
// }
// Heart.prototype.draw = function () {
// ctx.translate(-1000, this.y);//这一步跟ctx.shadowOffsetX必须一起使用,不明白为啥?
// ctx.beginPath();
// for (let i = 0; i < 30; i++) {
// var vector = this.vertices[i];
// ctx.lineTo(vector.x, vector.y);
// }
// ctx.shadowColor = "red";
// ctx.shadowOffsetX = this.x + 1000;
// ctx.fill();
// }
// canvas.onmousedown = function (e) {
// var x = e.offsetX;
// var y = e.offsetY;
// console.log(x,y)
// var heart = new Heart(x, y);
// heart.draw();
// }
// myCanvas.width = 500;
// myCanvas.height = 500;
// var r3 = 250;
// var ctx = myCanvas.getContext('2d');
// //generate color
// var color = [];
// for(var i=1;i<=24;i++){
// var p = 30+(70/24)*i;
// color.push('hsl(170,' + p + '%,' + p + '%)');
// }
// ctx.translate(250,250);
// drawSector(24,r3,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]);
// //draw white space center
// ctx.save();
// ctx.fillStyle = "#fff";
// ctx.beginPath();
// ctx.arc(0,0,80,0,2*Math.PI);
// ctx.fill()
// ctx.restore();
// function drawSector (split,r,text) {
// // body...
// ctx.save();
// ctx.strokeStyle = '#fff';
// for(var i=1;i<=split;i++){
// ctx.fillStyle = color[i];
// ctx.beginPath();
// ctx.moveTo(0,0);
// ctx.lineTo(r,0);
// ctx.arc(0,0,r,0,2*Math.PI/split);
// ctx.fill();
// ctx.stroke();
// if(text){
// ctx.rotate(Math.PI/split);
// ctx.save();
// ctx.fillStyle = "#000";
// ctx.fillText(text[i-1],r-25,0);
// ctx.restore();
// ctx.rotate(Math.PI/split);
// }
// else{
// ctx.rotate(2*Math.PI/split);
// }
// }
// ctx.restore();
// }
<canvas id="myCanvas"></canvas>