 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas |
Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculosQuantidade de visualizações: 3887 vezes |
O método arc() do objeto Canvas do HTML5 nos permite criar figuras tais como arcos, curvas e círculos. Para isso é importante entender os seus parâmetros:arc(x, y, radius, ang1, ang2, direction); Os parâmetros x e y indicam as coordenadas do centro do círculo. O parâmetro radius indica o raio do círculo. Os parâmetros ang1 e ang2 indicam o ângulo inicial e o ângulo final. O parâmetro direction indica a direção do desenho. Se o valor true for informado, a direção será anti-horário. Se for false, o desenho será no sentido horário. É importante observar que os ângulos são medidos em radianos, não em graus. Assim, o ângulo 0 representa a posição 3 horas no relógio. A posição de 9 horas é (1 * PI), 12 horas é (1.5 * PI) e 6 horas é (0.5 * PI). Portanto, se você quiser desenhar um círculo completo, deverá sair do ângulo 0 e ir até (2 * PI). Veja um trecho de código que desenha um arco equivalente a um quarto de uma pizza, ou seja, 25%, saindo do ângulo 90º (em graus) e indo até 180º (graus): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<meta charset="utf-8">
<title>Estudos HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos desenhar um arco sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
// o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
// e vai até o ânculo 180 (graus)
// as medidas na função arc() são em radianos, não em graus
contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
Execute este código e veja que o arco realmente foi desenhado. Seu resultado deverá ser parecido com:  No entanto, para parecer um pedação de pizza, ou seja, o ponto de partida para um gráfico de pizza, é preciso que tenhamos duas linhas ligado esse arco ao centro do círculo. Veja a modificação que fiz: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<meta charset="utf-8">
<title>Estudos HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos desenhar um arco sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
// primeiro movemos a caneta de desenho para o centro do círculo
contexto.moveTo(100, 100);
// o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
// e vai até o ânculo 180 (graus)
// as medidas na função arc() são em radianos, não em graus
contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
// agora desenhamos uma linha de volta para o arco
contexto.lineTo(100, 100);
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
Execute novamente e veja que agora o efeito ficou bem melhor. Seu resultado deverá ser parecido com:  Para finalizar, vamos colorir o pedação de pizza. Veja a nova versão (com o código completo): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos desenhar um arco sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
// primeiro movemos a caneta de desenho para o centro do círculo
contexto.moveTo(100, 100);
// o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
// e vai até o ânculo 180 (graus)
// as medidas na função arc() são em radianos, não em graus
contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
// agora desenhamos uma linha de volta para o arco
contexto.lineTo(100, 100);
// vamos preencher o gráfico
contexto.fillStyle = "#CCCCCC"; // cor do preenchimento
contexto.fill(); // preenche de fato
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
Agora o resultado será:  |
 Link para compartilhar na Internet ou com seus amigos: |
C++ ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o comprimento da hipotenusa em C++ dadas as medidas do cateto oposto e do cateto adjascenteQuantidade de visualizações: 1795 vezes |
Nesta dica mostrarei como é possível usar a linguagem C++ para retornar o comprimento da hipotenusa dadas as medidas do cateto oposto e do cateto adjascente. Vamos começar analisando a imagem a seguir: Veja que, nessa imagem, eu já coloquei os comprimentos da hipotenusa, do cateto oposto e do cateto adjascente. Para facilitar a conferência dos cálculos, eu coloquei também os ângulos theta (que alguns livros chamam de alfa) e beta já devidamente calculados. Então, sabendo que o quadrado da hipotenusa é igual à soma dos quadrados dos catetos (Teorema de Pitógoras): \[c^2 = a^2 + b^2\] Tudo que temos a fazer a converter esta fórmula para código C++. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
#include <iostream>
#include <math.h>
#include <cstdlib>
using namespace std;
int main(int argc, char *argv[]){
float a = 20; // medida do cateto oposto
float b = 30; // medida do cateto adjascente
// agora vamos calcular o comprimento da hipotenusa
float c = sqrt(pow(a, 2) + pow(b, 2));
// e mostramos o resultado
cout << "O comprimento da hipotenusa é: " << c << "\n\n";
system("PAUSE"); // pausa o programa
return EXIT_SUCCESS;
}
Ao executar este código C++ nós teremos o seguinte resultado: O comprimento da hipotenusa é: 36.0555 Como podemos ver, o resultado retornado com o código C++ confere com os valores da imagem apresentada. |
C# ::: C# + MySQL ::: MySqlCommand |
Como inserir dados em uma tabela MySQL usando INSERT INTO e consultas parametrizadas no C#Quantidade de visualizações: 788 vezes |
|
As consultas parametrizadas podem ser definidas para o método ExecuteNonQuery() da classe MySqlCommand por meio dos métodos Add() e AddWithValue() do objeto Parameters. Neste exemplo eu mostrarei como usar AddWithValue(), já que ele nos permite informar tanto o parâmetro quanto o seu valor. Observe que a tabela usada nesta dica possui os campos id, titulo, autor, paginas e data_cadastro. O campo id é auto-incremento (recebendo o valor NULL) e o campo data_cadastro é do tipo DATETIME (e recebe o valor NOW()). Veja o código completo para o exemplo (incluindo a conexão C# + MySQL usando a classe MySqlConnection): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
using System;
using System.Data;
using System.Windows.Forms;
using MySql.Data.MySqlClient;
namespace EstudosMySQL {
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e) {
// objeto de conexão
MySqlConnection conn = null;
// string de conexão
string connStr = "server=localhost;user id=root; " +
"password=osmar1234; database=estudos; pooling=false";
try {
conn = new MySqlConnection(connStr);
conn.Open();
if (conn.State == ConnectionState.Open) {
// primeiro criamos um novo objeto MySqlCommand
MySqlCommand comando = new MySqlCommand();
// definimos a conexão para este comando
comando.Connection = conn;
// definimos o comando SQL a ser executado usando parâmetros
comando.CommandText = "INSERT INTO livros (id, titulo, autor, paginas, data_cadastro) " +
"VALUES(NULL, @titulo, @autor, @paginas, NOW())";
// agora definimos os valores para os parâmetros
comando.Parameters.AddWithValue("@titulo", "APLICAÇÕES PHP REST");
comando.Parameters.AddWithValue("@autor", "CARLOS JUNIOR SOUZA");
comando.Parameters.AddWithValue("@paginas", 280);
comando.Prepare();
// e executamos o comando SQL
int res = comando.ExecuteNonQuery();
if (res > 0) {
MessageBox.Show("Operação realizada com sucesso. " + res + " linhas afetadas.");
}
else {
MessageBox.Show("Deve ter acontecido alguma coisa. " + res + " linhas afetadas.");
}
}
}
catch (MySqlException ex) {
MessageBox.Show("Erro: " +
ex.Message);
}
}
}
}
|
C# ::: Coleções (Collections) ::: ArrayList |
Como escrever um método C# que retorna uma ArrayListQuantidade de visualizações: 17039 vezes |
|
Estudantes C# ficam um pouco confusos quando solicitados a escrever funções que retornam objetos de classes. E essa confusão é maior ainda quando precisam retornar uma ArrayList, mais precisamente um objeto da classe ArrayList. Esta dica mostra como isso pode ser feito. Veja que temos um método que define, em sua assinatura, que o tipo de retorno não é void (sem retorno) mas sim um objeto da classe ArrayList. No corpo deste método temos a criação da ArrayList propriamente dita, a adição de cinco inteiros e finalmente o uso da palavra-chave return para retornar o ArrayList já preenchido ao chamador do método. Note que o método Main é responsável por efetuar uma chamada ao método, obter o ArrayList resultante e em seguida usar o laço foreach para exibir seus valores: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
// método que retornará uma ArrayList
static ArrayList obterLista(){
// Cria o ArrayList
ArrayList lista = new ArrayList();
// Adiciona 5 inteiros
lista.Add(1);
lista.Add(2);
lista.Add(3);
lista.Add(4);
lista.Add(5);
// retorna o ArrayList preenchido
return lista;
}
static void Main(string[] args){
// obtém um ArrayList preenchido a partir do
// método obterLista
ArrayList mLista = obterLista();
// exibe os valores do ArrayList
foreach (int valor in mLista){
Console.Write("{0} ", valor);
}
// pausa o programa
Console.ReadKey();
}
|
Python ::: Desafios e Lista de Exercícios Resolvidos ::: Recursão (Recursividade) |
Exercícios Resolvidos de Python - Uma função recursiva que conta quantas vezes um valor inteiro k ocorre em um vetor de inteirosQuantidade de visualizações: 225 vezes |
|
Pergunta/Tarefa: Escreva uma função recursiva em Python que conta quantas vezes um valor inteiro k ocorre em um vetor de 10 inteiros. Sua função deverá ter a seguinte assinatura: # função recursiva que recebe um valor e informa quantas vezes # ele aparece no vetor também informado def quant_repeticoes(indice, valor, vetor): # sua implementação aqui Sua saída deverá ser parecida com: Informe o 1 valor: 2 Informe o 2 valor: 7 Informe o 3 valor: 4 Informe o 4 valor: 7 Informe o 5 valor: 1 Informe o valor a ser pesquisado no vetor: 7 O valor informado se repete 2 vezes. Veja a resolução comentada deste exercício usando Python: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
# método principal
def main():
# vamos declarar um vetor de 10 inteiros
valores = [0 for x in range(5)]
# vamos pedir ao usuário que informe os valores do vetor
for i in range(len(valores)):
valores[i] = int(input("Informe o %d.o valor: " % ((i + 1))))
# agora vamos pedir para informar o valor a ser pesquisado
valor = int(input("\nInforme o valor a ser pesquisado no vetor: "))
# e vamos ver a quantidade de repetições
repeticoes = quant_repeticoes(0, valor, valores)
print("O valor informado se repete {0} vezes.".format(repeticoes))
# função recursiva que recebe um valor e informa quantas vezes
# ele aparece no vetor também informado
def quant_repeticoes(indice, valor, vetor):
if indice == len(vetor) - 1: # caso base...hora de parar a recursividade
if vetor[indice] == valor:
return 1 # mais um repetição foi encontrada
else: # dispara mais uma chamada recursiva
if vetor[indice] == valor: # houve mais uma repetição
return 1 + quant_repeticoes(indice + 1, valor, vetor)
else:
return 0 + quant_repeticoes(indice + 1, valor, vetor) # não repetiu
return 0 # só para deixar o compilador satisfeito...esta linha nunca é executada
if __name__== "__main__":
main()
|
C ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como ordenar os elementos de um vetor C usando a ordenação da bolha (Bubble Sort)Quantidade de visualizações: 25915 vezes |
|
O método ou algorítmo de ordenação da bolha é uma das técnicas mais simples de ordenação. No entanto, este método não é eficiente, visto que o tempo despendido para sua execução é muito elevado se comparado à outros métodos existentes. Geralmente usamos este método quando queremos ordenar 50 elementos ou menos. O entendimento deste método é fácil. Se estivermos ordenados os valores do menor para o maior, o método da bolha percorre os elementos da matriz, comparando e movendo o menor valor para a primeira posição da matriz, tal qual bolhas indo para a superfície. Veja um exemplo completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
#include <stdio.h>
#include <stdlib.h>
void bubble_sort(int matriz[], int tam){
int temp, i, j;
for(i = 0; i < tam; i++){
for(j = 0; j < tam; j++){
if(matriz[i] < matriz[j]){
temp = matriz[i];
matriz[i] = matriz[j];
matriz[j] = temp;
}
}
}
}
int main(int argc, char *argv[])
{
int valores[] = {4, 6, 2, 8, 1, 9, 3, 0, 11};
int i, tamanho = 9;
// imprime a matriz sem a ordenação
for(i = 0; i < 9; i++){
printf("%d ", valores[i]);
}
// vamos ordenar a matriz
bubble_sort(valores, tamanho);
// imprime a matriz ordenada
puts("\n");
for(i = 0; i < 9; i++){
printf("%d ", valores[i]);
}
puts("\n");
system("pause");
return 0;
}
|
Desafios, Exercícios e Algoritmos Resolvidos de C |
Veja mais Dicas e truques de C |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
