2

Как нарисовать линии, как на картинке, только на картинке кружочки, а мне нужно линиивведите сюда описание изображения

// Defint the canvas
var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");

// Define some size
var radius = canvas.height / 2;

// Center the ctx
ctx.translate(radius,radius);

// Draw the Clock every second
setInterval(drawClock, 1000);

// Draw the Clock 
function drawClock() {
	drawFace(ctx, radius);
	drawNumbers(ctx, radius);
	drawTime(ctx,radius);
	drawNose(ctx,radius);
}

// Define how to draw the Face
function drawFace(ctx, radius) {
	ctx.beginPath();
	ctx.arc(0, 0, radius, 0, 2*Math.PI);
	ctx.fillStyle = "#F8F8FF";
	ctx.fill();
}

// Define how to draw the Numbers
function drawNumbers(ctx, radius) {
	var ang;
	var num;
	
	// Define the text styles
	ctx.font = "14px 'Lato'";
	ctx.fillStyle = "black";
	ctx.textBaseline = "middle";
	ctx.textAlign = "center";
	
	// Rotate and put number and rotate back
	for(num=1; num<=12; num++) {
		ang = num * Math.PI / 6;
		ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
	}
}

// Draw the Hands depends on current time
function drawTime(ctx,radius) {
	// Get the current time
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	
	// Draw the Hour Hand
	hour=hour%12;
	hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
	drawHand(ctx, hour, radius*0.4, 4, "black");
	// Draw the Minute Hand
	minute=(minute*Math.PI/(30))+(second*Math.PI/(30*60));
	drawHand(ctx, minute, radius*0.6, 2, "black");
	// Draw the Second Hand
	second=(second*Math.PI/30);
	drawHand(ctx, second, radius*0.75, 1, "#DC143C");
}

// Define how to draw the Hands
function drawHand(ctx, pos, length, width, color){
	ctx.beginPath();
	ctx.lineWidth = width;
	ctx.lineCap = "round";
	ctx.moveTo(0,0);
	ctx.rotate(pos);
	ctx.lineTo(0, -length);
	ctx.strokeStyle = color;
	ctx.stroke();
	ctx.rotate(-pos);
}

function drawNose(ctx, radius) {
	ctx.beginPath();
	ctx.arc(0, 0, radius*.08, 0, 2*Math.PI);
	ctx.fillStyle = "#DC143C";
	ctx.fill();
}
	
html
body
.flex-container
	width 100%
	height 100%

.flex-container
	display flex
	justify-content center
	align-items center
<div class="flex-container">
	<canvas id="clock" width="240" height="240"></canvas>
</div>

4
  • семь красных линий, из них три - прозрачным цветом, все перпендикулярны
    – user176262
    11 янв 2018 в 22:32
  • это понятно, я чол-то не допру как их в этом цикле рисовать for(num=1; num<=12; num++) {
    – Aslero
    11 янв 2018 в 22:38
  • Один час - 30 градусов, одна минута - 6.
    – user176262
    11 янв 2018 в 22:40
  • Продолжение движения: ru.stackoverflow.com/questions/769130/… :) Так и допишем до самого конца :)
    – user262779
    11 янв 2018 в 22:45

2 ответа 2

4

Первый раз писал JS код, но я думаю это то что вы хотели.

введите сюда описание изображения

// Defint the canvas
var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");

// Define some size
var radius = canvas.height / 2;

// Center the ctx
ctx.translate(radius,radius);

// Draw the Clock every second
setInterval(drawClock, 1000);

// Draw the Clock
function drawClock() {
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
    drawTime(ctx,radius);
    drawSteps(ctx, radius)
    drawNose(ctx, radius)
}

// Define how to draw the Face
function drawFace(ctx, radius) {
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2*Math.PI);
    ctx.fillStyle = "#F8F8FF";
    ctx.fill();
}

// Define how to draw the Numbers
function drawNumbers(ctx, radius) {
    var ang;
    var num;

    // Define the text styles
    ctx.font = "14px 'Lato'";
    ctx.fillStyle = "black";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";

    // Rotate and put number and rotate back
    for(num=1; num<=12; num++) {
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
    }
}

// Draw the Hands depends on current time
function drawTime(ctx,radius) {
    // Get the current time
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    // Draw the Hour Hand
    hour=hour%12;
    hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.4, 4, "black");
    // Draw the Minute Hand
    minute=(minute*Math.PI/(30))+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.6, 2, "black");
    // Draw the Second Hand
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.75, 1, "#DC143C");
}

// Define how to draw the Hands
function drawHand(ctx, pos, length, width, color){
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.rotate(-pos);
}

function drawSteps(ctx, radius){
    for(num=1; num<=12; num++) {
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        drawStep(ctx, ang, 0, 4, "black");
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
    }

    for(num=1; num<=60; num++) {
        ang = num * Math.PI / 30;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        drawStep(ctx, ang, 0, 1, "black");
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
    }
}

function drawStep(ctx, pos, length, width, color){
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.moveTo(0,-10);
    ctx.lineTo(0,-17);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.rotate(-pos);
}

function drawNose(ctx, radius) {
    ctx.beginPath();
    ctx.arc(0, 0, radius*.08, 0, 2*Math.PI);
    ctx.fillStyle = "#DC143C";
    ctx.fill();
}
3
  • спасибо, немного подкорректировал и супер
    – Aslero
    12 янв 2018 в 7:22
  • Пожалуйста. Рад был помочь. 12 янв 2018 в 7:30
  • @Aslero Галочка слева - щелк. На этом ресурсе считается хорошим тоном отмечать ответы, которые решили Вашу проблему, как принятые.
    – user176262
    12 янв 2018 в 15:10
0

пробовал так но не выводит

 var radiusClock = ctx.width/2 - 10;
        var xCenterClock = ctx.width/2;
        var yCenterClock = ctx.height/2;
         var radiusNum = radiusClock - 10; //Радиус расположения рисочек    


    var radiusNum = radiusClock - 10; //Радиус расположения рисочек 
        var radiusPoint;
        for(var tm = 0; tm < 60; tm++){
          ctx.beginPath();
          if(tm % 5 == 0){radiusPoint = 5;}else{radiusPoint = 2;} //для выделения часовых рисочек
          var xPointM = xCenterClock + radiusNum * Math.cos(-6*tm*(Math.PI/180) + Math.PI/2);
          var yPointM = yCenterClock - radiusNum * Math.sin(-6*tm*(Math.PI/180) + Math.PI/2);
          ctx.arc(xPointM, yPointM, radiusPoint, 0, 2*Math.PI, true);
          ctx.stroke();
          ctx.closePath();
        }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.