Como usar um padrão como preenchimento ou traçado com a tag html5 canvas

Quase todos os operação em HTML5 do tela de pintura

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 acidentes vasculares cerebrais são as cores, gradientes e padrões.

Video: Colors - HTML5 Canvas

UMA padronizar é 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 estar lado a lado.

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 tela de pintura tag:

 função sorteio () {var desenho = document.getElementById ("desenhando") Con -var = drawing.getContext ("2d") -var textura = document.getElementById ("textura") -pFill = con.createPattern (textura, "repetir") -con.fillStyle = pFill-con.fillRect (10150190150) -con.font = "40 px sans-serif"-con.fillText ("Padronizar!", 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:

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 à sua imagem.

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

   Video: HTML Canvas - Урок 2

   Como gradientes, preenchimentos padrão podem ser reutilizados, assim armazenar o padrão em uma variável para uso posterior.

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

   Video: Dreamweaver tutorial:The HTML 5 Canvas Tag

4. Especificar parâmetro repetição do padrão.

   Video: #14 - HTML5 Графика и Анимация с Canvas, изучаем canvas API

   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 seu 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 para repeat-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, realizar qualquer operação de enchimento para desenhar no padrão.