English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

SVG Inline5 Manual Básico

SVG Inline5 API

SVG Inline5 Mídia

SVG Inline5 Gráficos

SVG Inline5 Canvas

O <canvas> é um HTML5 Um elemento HTML adicional que pode ser usado para desenhar imagens com scripts (geralmente JavaScript). Pode ser usado para criar álbuns de fotos ou criar animações simples (não tão simples assim), até mesmo para processamento e renderização de vídeo em tempo real.

A tag <canvas> define gráficos, como gráficos e outras imagens, você deve usar scripts para desenhar gráficos.

Desenhar um retângulo vermelho, retângulo de gradiente, retângulo colorido e alguns textos coloridos no canvas.

你的浏览器不支持 HTML5 的 <canvas> 元素.

O que é canvas?

SVG Inline5 O elemento <canvas> é usado para desenhar gráficos, feito através de scripts (geralmente JavaScript).

A etiqueta <canvas> é apenas um contêiner de imagem, você deve usar scripts para desenhar gráficos.

Você pode usar várias maneiras para desenhar caminhos, caixas, círculos, caracteres e adicionar imagens no canvas.

Suporte do navegador

Os números na tabela representam a primeira versão do navegador que suporta o elemento <canvas>.

elemento




Descrição4.09.02.03.19.0

Crie um canvas (Canvas)

Um canvas em uma página da web é uma caixa retangular, desenhada através do elemento <canvas>.

Atenção: Pelo padrão, o elemento <canvas> não tem borda e conteúdo.

<canvas>Exemplo simples a seguir:

<canvas id="myCanvas" width="200" height="100"></canvas>

Atenção: A etiqueta geralmente precisa especificar um atributo id (frequentemente referenciado em scripts), As propriedades width e height definem o tamanho do canvas.

Aviso:Você pode usar vários elementos <canvas> em uma página HTML.

Use a propriedade style para adicionar bordas:

<!DOCTYPE html><html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network (oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px sólido #000000;">
body>/canvas>
body>/script>
body>/<
html>/Teste e Veja ‹

Usando JavaScript para desenhar imagens

O elemento canvas em si não possui capacidade de desenho. Todas as operações de desenho devem ser realizadas internamente no JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px sólido #c3c3c3>
您的浏览器不支持 HTML5　etiqueta canvas.
body>/canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75,
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

Exemplo de análise:

Primeiro, encontre o elemento <canvas>:

var c=document.getElementById("myCanvas");

Em seguida, crie o objeto context:

var ctx=c.getContext("2d");

getContext("2d) objeto é interno do HTML5 O objeto, que possui várias métodos de desenho de caminho, retângulo, círculo, caractere e adição de imagem.

Os dois código abaixo desenham um retângulo vermelho:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75,

A configuração da propriedade fillStyle pode ser cor CSS, gradiente ou padrão. fillStyle A configuração padrão é #000000 (preto).

fillRect(x,y,largura,altura) método define a forma atual de preenchimento retangular.

Coordenadas do Canvas

canvas é uma grade bidimensional.

As coordenadas superior esquerda do canvas são (0,0)

O método fillRect acima possui os parâmetros (0,0,150,75)。

Isso significa: desenhar no canvas 150x75 do retângulo, começando no canto superior esquerdo (0,0).

Exemplo de coordenadas

Como mostrado na figura a seguir, as coordenadas X e Y do canvas são usadas para localizar a pintura no canvas. A caixa retangular ao mover o mouse mostra as coordenadas de localização.

X
Y

Canvas - Caminho

Para desenhar linhas no Canvas, usaremos os seguintes dois métodos:

  • moveTo(x,y) definir coordenadas de início da linha

  • lineTo(x,y) definir coordenadas de fim da linha

Para desenhar linhas, devemos usar o método "ink", como stroke().

示例

Definir coordenadas de início (0,0), e coordenadas de fim (200,100)。Em seguida, use o método stroke() para desenhar a linha:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

Para desenhar círculos no canvas, usaremos os seguintes métodos:

arc(x,y,r,start,stop)

Na verdade, ao desenhar círculos, usamos o método "ink", por exemplo, stroke() ou fill().

示例

Usar o método arc() para desenhar um círculo:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
body>/}　
body>/script>
body>/<
html>/Teste e Veja ‹

Canvas - Texto

As propriedades e métodos importantes para desenhar texto no canvas são os seguintes:

  • font - Definir fonte

  • fillText(text,x,y) - Desenhar texto preenchido no canvas

  • strokeText(text,x,y) - Desenhar texto em branco no canvas

usando fillText():

示例

Usar a fonte "Arial" para desenhar um texto alto 30px de texto (preenchido):

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

usando strokeText():

示例

Usar a fonte "Arial" para desenhar um texto alto 30px de texto (em branco):

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

Canvas - 　Gradiente

Gradientes podem ser preenchidos em retângulos, círculos, linhas, texto etc., diferentes formas podem definir cores diferentes.

Existem duas maneiras diferentes de configurar gradientes de Canvas:

  • createLinearGradient(x,y,x1,y1) - Criar gradiente de linha

  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/Gradiente circular

Deve-se usar duas ou mais cores de parada ao usar objetos de gradiente.

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

示例

创建一个线性渐变。使用渐变填充矩形:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//　Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

使用 createRadialGradient():

示例

创建一个径向/圆渐变。使用渐变填充矩形：

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//　Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

使用图像:

示例

把一幅图像放置到画布上:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");

　　　　ctx.drawImage(img,10,10,
);　
body>/}
body>/script>
body>/<
html>/Teste e Veja ‹

›

Manual de Referência do Canvas HTMLAs propriedades completas da tag podem ser consultadas em

Manual de Referência do Canvas.

HTML <canvas> TagTag
DescriçãoSVG Inline5 <canvas>
SVG Inline5 Uso do elemento canvas com JavaScript para desenhar imagens na página da web.SVG Inline5 HTML