Tegesi ya HTML <canvas>

Jadili ya kufikia

Kitabu cha thamani

HTML vifungo

属性

属性	值	描述
height	像素值	规定画布的高度。默认值为 150。
width	像素值	规定画布的宽度。默认值为 300。

全局属性

标签还支持 HTML 中的全局属性。

事件属性

标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示元素：

canvas {
  height: 150px;
  width: 300px;
}

亲自试一试

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持

我们甚至可以在 IE 中使用

Kuzungumza kati ya kituo cha <canvas> na SVG na VML

Kwa sababu ya kuzungumza kati ya kituo cha <canvas> na SVG na VML, <canvas> ina API ya kufanyikaja ambayo inakusoma JavaScript, wakati SVG na VML inasoma kitabu cha XML kusoma kufanyikaja.

Hizi nguo zinafaa kwa sababu zina ngumu na mafanikio yao. Kwa mfano, kufanyikaja SVG kina mafanikio ya kusoma, kwa sababu kumekwisha kumwacha kipimo cha kufikiria.

Kwa kusingania kipimo cha kifanyikaji kwa <canvas> kama moja, inahitajika kufichuka kwa kusoma na kusafisha tena.

Je, kwa ujenzi wa <canvas> tukifanyia kufikiria.

Kawaida, API ya kifanyikaji cha Canvas kimepewa na kifaa cha <canvas> cha kufikiria, haliwae kwa kufikiria kwa kusoma kwa kuzingatia mawendo ya kifaa cha kufikiria. methodi ya getContext()kutoka kwa kituo cha kifanyikaji cha picha.

Canvas API huzui kwa kusoma mawendo. Kama hivyo, mawendo hupewa na msafirisho wa uendeshaji wa watu, haliwae na kusoma kama matini na namba, kama kusoma maana ya methodi ya beginPath() na arc().

Kati ya kuzingatia mawendo, matukio mengi, kama fill(), ni kufanyia mawendo ya hii mawendo. Mafano ya mawendo ya mawendo, kama fillStyle, inaeleza kama matukio haya yana matumizi.

Tahadari:Kwa sababu API ya Canvas inayopita sana inaonekana inaunda kina kina hiki inaona haukufaa kufanya mawasiliano ya matukio ya mawasiliano. Inafaa kuingia kina ya mawasiliano ya <canvas> kwa njia ya kumwengenea kina ya mawasiliano ya bitmap kwa mawasiliano yake au kutumia CSS kuingia kina ya mawasiliano ya HTML kwa matumizi ya CSS kuingia kina ya mawasiliano ya HTML.

Mawasiliano ya browser

Inaniria nambari za browser za kwanza zinaongeza kina hiki.

Chrome	Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
4.0	9.0	2.0	3.1	9.0

Makao ya mbali <button>
Makao ya mbele <caption>

Jadili ya kufikia

Kitabu cha thamani

HTML vifungo

例子 2

属性

全局属性

事件属性

默认的 CSS 设置

Kuzungumza kati ya kituo cha <canvas> na SVG na VML

Je, kwa ujenzi wa <canvas> tukifanyia kufikiria.

Mawasiliano ya browser

Kifunzi cha kifaa

Mwongozo wa HTML

Mifano ya HTML

Uandishi wa HTML

Makao ya HTML

Viungo vya msingi

Jadili ya kufikia

Kitabu cha thamani

HTML vifungo

例子 2

属性

全局属性

事件属性

默认的 CSS 设置

的历史

Kuzungumza kati ya kituo cha <canvas> na SVG na VML

Je, kwa ujenzi wa <canvas> tukifanyia kufikiria.

Mawasiliano ya browser

Kifunzi cha kifaa

Mwongozo wa HTML

Mifano ya HTML

Uandishi wa HTML

Makao ya HTML

Viungo vya msingi