Prefácio: terminei de ler hoje a tela do livro JS. Estou tão feliz ~ eu sou minha amada tela novamente ~ ouye ~
Eu vi alguém sugerindo que eu desenhasse um homem gordo azul antes, sim, por que eu esqueci o homem de gordo azul favorito que tive na minha infância? Para expressar meu pedido de desculpas ao Blue Fat Man, desenhei um mundo comovente hoje, o que também é um tipo de melhoria ~
Ok, por favor, vá para dentro para os passageiros. Por favor, não bloqueie a passagem, obrigado. Vamos dirigir ~
texto:
Vamos tirar uma foto hoje e ver o efeito
Hoje, o homem azul gordo se parece com isso, e me sinto aliviado ao ver que ele ainda é tão gordo. Este mundo ainda está cheio de energia positiva, e ainda há pessoas que são mais gordas que eu, hahahaha
Então o código
parte html
<canvas id = "mycanvas"> vá e atualize seu navegador ~ </lvas>
JS parte
window.addeventListener ("load", function () {// Obtenha o contexto de tela var context = document.getElementById ("mycanvas"). getContext ("2d"); // julga se o contexto existe, se existe, como existe, como você pode executar o próximo código se (contexto) {// para iniciar um novo contexto. do relógio // desenha um grande círculo de contexto externo.arc (100,100,99,0,2*math.pi, false); // preencher context.fillstyle = "#315f9b"; context.fill (); // desenhar a borda do contexto do círculo. (194.100) e calcule o contexto de ponto.mevo (194.100); // desenhe o pequeno círculo dentro (deus redondo?) Context.arc (100,100,94,0,2*math.pi, false); // encher o pequeno círculo com outro contexto de cor azul leve. Aparece ~ // Crie um objeto de imagem e defina seu SRC na imagem do homem de gordura azul var imagem = new Image (); image.src = "2.png"; // use o método de contexto desenhação para desenhar a imagem do ponto (25,25) e desenhá -lo em um retângulo com um lateral de 150 contexto.DAWIMAGE (imagem, 25,25,150,150; (100.100) Como a nova origem, ou seja (0,0) contexto.Translate (100.100); // Desenhe nosso ponto de tempo context.fillstyle = "#02285A"; // O primeiro parâmetro é o que se segue, o segundo parâmetro é X e o terceiro é o seguinte x, o valor é o efeito. SITUÇÕES.FILLTEXT ("12",-5, -80); context.FillText ("6",-4,87); context.fillText ("3", 80,1); context.fillText ("9",-86,1); // Veja mais detalhes sobre esta função no momento (contexto);}}, false);Os mostradores dos relógios acima aparecem, mas a razão mais importante pela qual o relógio é um relógio é que ele pode exibir tempo (sem sentido), então o próximo passo é desenhar o ponteiro.
agora a parte da função
function NowTime (context) {// Crie um objeto de data para obter a hora local var mydate = new Date (); // Obtenha horas, minutos, segundos var myhour = mydate.gethours (); // converte hora em 12 horas de formato if (myhour> = 12) {myHour =Ir) mydate.getSeconds (); // Descreva a hora // Use para armazenar os radianos da hora atual no mostrador var averarc; // use 3 horas como ponto de partida da circunferência, representando os radianos no sentido horário (myhour <3) {houarc = 2*math.pi- (3-myhour)*math.pi/6; (myhour-3)*Math.pi/6;} // Ao apontar para 3, 6, 9, 12, é exatamente um múltiplo de 90 ° // há um desvio do ângulo convertido em radianos, então o tratamento especial é dado; case 3: myhour) {case 0: hourarc = math.pi*3/2; 9: houstarc = math.pi; quebra;} // Função de tempo de drawtime de chamada e drawtime (contexto, houarc, 60); // desenhar minutos // use o radian var minarc no mostrador do minuto atual no mostrador; // usa 15 minutos como ponto de partida da circunferência para representar o Radian no sentido horário if (mymin <15) {Minarc = 2*Math.pi- (15 mímina)*math.pi/30;} else {minarc = (myMin-15)*math.pi/30;}/Mining Minutes (myMin) (myMin-15)*math.pi/30; Math.pi*3/2; quebra; caso 15: minarc = 0; quebra; caso 30: minarc = math.pi/2; quebra; caso 45: minarc = math.pi; quebra;} // Função de drawtime de chamada e drawtime (contexto, minec, 80); // desenhar segundos // use o segundo segundo para armazenar o radian vararc no Dial; if (mySec <15) {secarc = 2*math.pi- (15-mysec)*math.pi/30;} else {secarc = (mySec-15)*math.pi/30;} // processamento para segundos, ainda está aqui porque o ângulo é convertido para os radianos e há uma desvio, a switch specialp (specialp é (mysec) (é a setina), que é a súctica (shatec), que ainda está em mysp (shet) e, em segundos, é que a súctica é convertida para os radianos e a interrupção da seta (é uma desvio (signo de setações), que ainda está em mys. 14:secArc = 0;break;case 29:secArc = Math.PI/2;break;case 44:secArc = Math.PI;break;}//Call drawTime function and drawTime(context,secArc,80,"red");//Set a timeout call function, call nowTime for every second timeout call nowTime to update the clock setTimeout(function(){//Before calling to draw a new pointer, of course, you should clear the original hour hand. Use a função ClearTime, é realmente fácil de usar!Então, como desenhamos especificamente ponteiros quando operamos o contexto? Eu também não sei, então vamos terminar hoje ~
Brincadeir
Em seguida, é a função Drawtime, que possui quatro parâmetros no total (contexto, Thearc, thlength, color = "#000"). O contexto vê através do contexto que é a tela à primeira vista, Thearc é o ângulo em que queremos girar a tela, o comprimento representa o comprimento do ponteiro e a cor é a cor do ponteiro.
função drawtime (contexto, thearc, thElngth, color = "#000") {// salve o ambiente atual de tela e use -o em conjunto com o método de restauração para restaurar o contexto da tela.Save (); // girar o pimentão (themerc, os parâmetros passados no contexto do radio de rotação. O ponto de partida para (0,0) context.moveto (0,0); // desenha um caminho para (o comprimento, 0); // desenhe esse caminho com o contexto de cor de cor especificado.strokestyle = cor; // a largura do caminho é 2Context.LineWidth = 2; // O caminho é invisível. Se você quiser ver o caminho, precisa usar o golpe para rastrear a linha. Como rastrear essa linha pode ser definida pelos vários atributos que usamos acima; // Restaurar contexto de contexto.restore ();}Embora esteja chegando ao fim, também há uma função de tempo limpo muito importante. Sem ele, seu relógio será ocupado por segundos densos. Todos temos a responsabilidade de cuidar de pacientes com fobia intensiva.
function cleartime (context) {// Iniciamos um novo subpato e, em seguida, desenhamos um círculo cheio de belo azul, cobrindo os ponteiros que desenhamos antes, o que é equivalente a limpar o contexto de discagem.beginpath (); context.arc (0,0,80,0,2*math.pi); context.fillstyle =#4ba2cf "; Acidente, portanto, convoce -o novamente, e será você, Pikachu (? Huh) var imagem = new Image (); image.src = "2.png"; // Essa coordenada é diferente das coordenadas carregadas pela primeira vez, porque modificamos a matriz de transformação, você ainda se lembra? Portanto, suas coordenadas devem ser contextos complementares.Bem, ok, está realmente aqui agora, está quase na hora de fazer uma refeição ~ Caros programadores fofos, lembre -se de comer ~