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

SVG en línea5 Tutoriales básicos

SVG en línea5 API

SVG en línea5 Medios

SVG en línea5 Gráficos

SVG en línea5 Canvas

El <canvas> es un HTML5 Un elemento HTML nuevo que se puede usar para dibujar imágenes con scripts (generalmente JavaScript). Puede usarse para crear colecciones de fotos o hacer animaciones simples (ni tan simples) e incluso puede realizar procesamiento y renderizado de video en tiempo real.

La etiqueta <canvas> define gráficos, como gráficos y otras imágenes, debe usar scripts para dibujar gráficos.

Dibuje un rectángulo rojo, un rectángulo degradado, un rectángulo de colores y algunos textos de colores en el lienzo (Canvas).

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

¿Qué es canvas?

SVG en línea5 El elemento <canvas> se utiliza para dibujar gráficos, realizado a través de scripts (generalmente JavaScript).

La etiqueta <canvas> es solo un contenedor de imagen, debes usar scripts para dibujar gráficos.

Puedes usar varios métodos para dibujar rutas, cajas, círculos, caracteres y agregar imágenes en canvas.

Compatibilidad del navegador

Los números en la tabla representan la primera versión del navegador que admite el elemento <canvas>.

elemento




Descripción4.09.02.03.19.0

Crea un lienzo (Canvas)

Un lienzo en una página web es un cuadro rectangular, dibujado a través del elemento <canvas>.

Nota: Por defecto, el elemento <canvas> no tiene borde ni contenido.

<canvas> Ejemplo simple a continuación:

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

Nota: La etiqueta generalmente necesita especificar una propiedad id (a menudo citada en scripts), Las propiedades width y height definen el tamaño del lienzo.

Aviso:Puedes usar múltiples elementos <canvas> en una página HTML.

Añade un borde usando la propiedad style:

<!DOCTYPE html><html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Web(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>/Ver la prueba ‹

Dibuja imágenes usando JavaScript

El elemento canvas en sí no tiene capacidad de dibujo. Todas las tareas de dibujo deben realizarse internamente en 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>/Ver la prueba ‹

Ejemplo de análisis:

Primero, encuentra el elemento <canvas>:

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

Luego, crea el objeto context:

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

getContext("2d) Es un objeto HTML integrado5 El objeto, que posee varios métodos de dibujo de rutas, rectángulos, círculos, caracteres y la adición de imágenes.

Las siguientes dos líneas de código dibujan un rectángulo rojo:

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

La propiedad fillStyle puede ser un color CSS, una gradiente o un patrón. fillStyle La configuración predeterminada es #000000 (negro).

fillRect(x,y,width,height) El método define la forma actual de relleno del rectángulo.

Coordenadas de Canvas

canvas es una cuadrícula bidimensional.

Las coordenadas superior izquierda del canvas son (0,0)

El método fillRect superior tiene parámetros (0,0,150,75)。

Lo que significa: dibujar en el lienzo 150x75 del rectángulo, comenzando desde la esquina superior izquierda (0,0).

Ejemplo de coordenadas

Como se muestra en la imagen siguiente, las coordenadas X e Y del lienzo se utilizan para localizar el dibujo en el lienzo. El cuadro rectangular de movimiento del ratón muestra las coordenadas de localización.

X
Y

Canvas - Ruta

Dibujar líneas en Canvas, usaremos los siguientes dos métodos:

  • moveTo(x,y) definir las coordenadas de inicio de la línea

  • lineTo(x,y) definir las coordenadas de finalización de la línea

Para dibujar líneas, debemos usar métodos de "tinta", como stroke().

示例

Definir las coordenadas de inicio (0,0), y las coordenadas de finalización (200,100)。Luego use el método stroke() para dibujar la línea:

你的浏览器不支持 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>/Ver la prueba ‹

Para dibujar círculos en canvas, usaremos los siguientes métodos:

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

En realidad, cuando dibujamos círculos, usamos el método "tinta", como stroke() o fill().

示例

Usar el método arc() para dibujar un 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>/Ver la prueba ‹

Canvas - Texto

Los atributos y métodos importantes para dibujar texto en canvas son los siguientes:

  • fuente - Definir fuente

  • fillText(text,x,y) - Dibujar texto sólido en el canvas

  • strokeText(text,x,y) - Dibujar texto hueco en el canvas

usando fillText():

示例

Dibujar un texto alto usando la fuente "Arial" en el lienzo: 30px de texto (sólido):

你的浏览器不支持 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>/Ver la prueba ‹

usando strokeText():

示例

Dibujar un texto alto usando la fuente "Arial" en el lienzo: 30px de texto (sólido):

你的浏览器不支持 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>/Ver la prueba ‹

Canvas - 　Desvanecimiento

El desvanecimiento puede rellenar rectángulos, círculos, líneas, texto, etc., y diferentes formas pueden definir colores diferentes.

Hay dos formas diferentes de configurar el desvanecimiento de Canvas:

  • createLinearGradient(x,y,x1,y1) - Crear desvanecimiento de línea

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

Debemos usar dos o más colores de parada cuando utilizamos el objeto de desvanecimiento.

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>/Ver la prueba ‹

使用 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>/Ver la prueba ‹

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");
img.onload = function() {
　　　　ctx.drawImage(img,10,10,
);　
body>/}
body>/script>
body>/<
html>/Ver la prueba ‹

›

Manual de referencia de Canvas HTMLLas propiedades completas de la etiqueta se pueden consultar en

Manual de referencia de Canvas.

Etiqueta HTML <canvas>Etiqueta
DescripciónSVG en línea5 <canvas>
SVG en línea5 Se utiliza el elemento canvas y JavaScript en las páginas web para dibujar imágenes.SVG en línea5 HTML