SOURCE

console 命令行工具 X clear

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