Como usar um padrão como preenchimento ou traçado com a Tag HTML5 Canvas

Quase todos os operação em HTML5 do lona função implementa um estilo de preenchimento ou traçado. Para tirar o máximo proveito da tela, você precisa entender como eles funcionam. Os três principais tipos de estilos que você pode usar em preenchimentos e traçados são as cores, gradientes e padrões.

UMA padrão é utilizado para definir uma imagem para ser usado como um enchimento ou acidente vascular cerebral. Você pode usar qualquer imagem como um padrão, mas é geralmente melhor para encontrar ou criar uma imagem projetada para ser telhado.

Existem muitas fontes de padrões de azulejos disponíveis na Web. Uma vez que você tem uma imagem que você deseja usar como um padrão de preenchimento, aqui está como implementá-lo na lona tag:

 draw function () {var desenho = document.getElementById ( "desenho") - var con = drawing.getContext ( "2d") - var textura = document.getElementById ( "textura") - pFill = con.createPattern (textura, " repetir ") - con.fillStyle = pFill-con.fillRect (10150190150) -con.font =" 40px sans-serif "-con.fillText (" Padrão ", 20, 80) -con.strokeStyle = pFill-con!. lineWidth = 5-con.strokeRect (10, 10, 180, 100) -} // tração final

Os resultados deste código são mostrados aqui:

image0.jpg

Um padrão é simplesmente uma imagem. Construir um padrão é relativamente simples:

  1. Tenha acesso a uma imagem.

    Você precisará de um objeto de imagem javascript para servir como base de seu padrão. Há uma série de maneiras de fazer isso, mas o mais fácil é criar a imagem em algum lugar no seu HTML, escondê-lo com o display: none estilo, e usar o padrão document.getElementById () técnica para obter acesso a sua imagem.

  2. Criar uma variável para o padrão.

    Como gradientes, preenchimentos de padrão pode ser reutilizado, então armazenar o padrão em uma variável para uso posterior.

  3. Use o createPattern () método para criar um padrão a partir de uma imagem.

  4. Especifique o parâmetro de repetição do padrão.

    O segundo parâmetro indica como o padrão se repita. O valor padrão é "repetir", que repete o padrão, tanto no x e y machados indefinidamente. Se o padrão não é lado a lado, você verá uma costura visível onde o padrão se repete. Você também pode definir o valor de repetição de repetir-X, repetir-y, e no-repeat.

  5. Aplique a variável de modelo para o fillStyle ou strokeStyle.

    Atribuir a variável de modelo para o contexto de fillStyle (ou strokeStyle) E, em seguida, executar qualquer operação de preenchimento para desenhar no padrão.

Semelhante

menu