Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - Đồng hồ canvas

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 13:14:19 31 4
mua khóa gpt4 Nike

Tôi đã tạo một chiếc đồng hồ trên Canvas và tôi thực sự đã vẽ các đường trên Canvas từ trung tâm và mỗi giây tôi lại vẽ một đường từ tâm thành một vòng tròn và cuối cùng tôi vẽ đường giây trên đồng hồ. Làm cách nào để xóa các đường đã vẽ trước đó để nó trông giống như một chiếc đồng hồ thật.

Cảm ơn rất nhiều vì sự giúp đỡ

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

vì (i = 0; i < 360; i += 10) {
  ctx.moveTo(i + 5, 180);
  ctx.lineTo(i, 180);

}
vì (i = 0; i < 360; i += 10) {
  ctx.moveTo(180, i + 5);
  ctx.lineTo(180, i);

}

ctx.stroke();

var iSin = 0,
  bộ đếmSin = 0,
  xSin = 180,
  ySin = 0;
var iCos = 0,
  bộ đếm Cos = 0,
  xCos = 0,
  yCos = 180;
var iCircle = 0,
  bộ đếmCircle = 0,
  xCircle = 180,
  yCircle = 0;
var iLinesInCircle = 0,
  bộ đếmLinesInCircle = 0,
  xLinesInCircle = 180,
  yLinesInCircle = 0;
var iMinutes = 0,
  bộ đếmPhút = 0,
  xPhút = 180,
  yPhút = 0;
var iHours = 0,
  bộ đếm giờ = 0,
  xGiờ = 180,
  yGiờ = 0;
var tăng = 90/180 * Math.PI/9;
var tăngLinesInCircle = 6 * Math.PI / 180;
var tăngPhút = 6 * Math.PI/180;
var tăngHours = 6 * Math.PI / 180;
//drawSineWave();
//drawCosineWave();
//drawCircle();
drawLinesInCircle();
drawMinutes();
drawHours();

hàm drawSineWave() {
  ctx.beginPath();
  ctx.StrokeStyle = ("#0C620B");
  ctx.lineWidth = 1;
  ctx.moveTo(xSin, ySin);
  xSin = 180 + Math.sin(counterSin) * 180;
  ySin = iSin;
  counterSin += tăng;
  ctx.lineTo(xSin, ySin);
  ctx.stroke();
  iSin += 10;
  nếu (iSin <= 360) {
    setTimeout(drawSineWave, 100);
  }
}


hàm drawCosineWave() {
  ctx.beginPath();
  ctx.StrokeStyle = ("#BE1616");
  ctx.lineWidth = 1;
  ctx.moveTo(xCos, yCos);
  xCos = iCos;
  yCos = 180 - Math.cos(counterCos) * 180;
  counterCos += tăng;
  ctx.lineTo(xCos, yCos);
  ctx.stroke();
  iCos += 10;
  nếu (iCos <= 360) {
    setTimeout(drawCosineWave, 100);
  }
}

hàm drawCircle() {
  ctx.beginPath();
  ctx.StrokeStyle = ("#021A02");
  ctx.lineWidth = 1;
  ctx.moveTo(xCircle, yCircle);
  xCircle = 180 + Math.sin(counterCircle) * 180;
  yCircle = 180 - Math.cos(counterCircle) * 180;
  counterCircle += tăng;
  ctx.lineTo(xCircle, yCircle);
  ctx.stroke();
  iCircle += 10;
  nếu (iCircle <= 360) {
    setTimeout(drawCircle, 100);
  }
}

hàm drawLinesInCircle() {

  var ctxline = c.getContext("2d");
  //ctxline.restore();
  ctxline.beginPath();
  ctxline.StrokeStyle = ("#EDDE54");
  ctxline.lineWidth = 1;
  ctxline.moveTo(180, 180);
  xLinesInCircle = 180 + Math.sin(counterLinesInCircle) * 180;
  yLinesInCircle = 180 - Math.cos(counterLinesInCircle) * 180;
  counterLinesInCircle += tăngLinesInCircle;
  ctxline.lineTo(xLinesInCircle, yLinesInCircle);
  ctxline.đột quỵ();
  //ctxline.clearRect(0,0,360,360);
  iLinesInCircle += 6;
  if (iLinesInCircle <= 360) {
    setTimeout(drawLinesInCircle, 1000);
  }
}

hàm drawMinutes() {
  ctx.beginPath();
  ctx.StrokeStyle = ("#545EED");
  ctx.lineWidth = 5;
  ctx.moveTo(180, 180);
  xMinutes = 180 + Math.sin(counterMinutes) * 160;
  yMinutes = 180 - Math.cos(counterMinutes) * 160;
  bộ đếmPhút += tăngPhút;
  ctx.lineTo(xMinutes, yMinutes);
  ctx.stroke();
  iPhút += 6;
  nếu (iMinutes <= 360) {
    setTimeout(drawMinutes, 60000);
  }
}

hàm drawHours() {
  ctx.beginPath();
  ctx.StrokeStyle = ("#BE1616");
  ctx.lineWidth = 7;
  ctx.moveTo(180, 180);
  xHours = 180 + Math.sin(counterHours) * 120;
  yHours = 180 - Math.cos(counterHours) * 120;
  counterHours += tăngHours;
  ctx.lineTo(xHours, yHours);
  ctx.stroke();
  iHours += 6;
  nếu (iHours <= 360) {
    setTimeout(drawHours, 3600000);
  }
}

câu trả lời hay nhất

Đơn giản nhất có lẽ là vẽ cùng một đường trên màu nền của Canvas trước, sau đó vẽ đường tiếp theo.

Về đồng hồ html - Canvas, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/29983975/

31 4 0
Bài viết khuyến nghị: html - Băng chuyền giao diện người dùng Bootstrap trống
Bài viết khuyến nghị: ng-form Gửi biểu mẫu được tạo động mà không cần ng-model cụ thể
Bài viết khuyến nghị: Đặt dấu mũ bên ngoài khoảng được tạo động
Bài viết khuyến nghị: Cấp lớp ánh xạ yêu cầu Spring MVC
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress