Kemahiran tutorial asas syntax_html5 kanvas HTML5

HTML 5 kanvas - sintaks asas

Penerangan ringkas

Spesifikasi 5 memperkenalkan banyak ciri baharu, salah satu yang paling dinanti-nantikan ialah elemennya. HTML 5 menyediakan kaedah melukis grafik melalui JavaScript, yang mudah digunakan tetapi berkuasa. Setiap elemen mempunyai "konteks" (fikirkan halaman pada papan lukisan) di mana sebarang bentuk boleh dilukis. Pelayar menyokong berbilang konteks kanvas dan menyediakan keupayaan lukisan grafik melalui . Spesifikasi 5 memperkenalkan banyak ciri baharu, salah satu yang paling dinanti-nantikan ialah elemennya. 5 menyediakan kaedah untuk melukis grafik melalui JavaScript yang mudah digunakan tetapi berkuasa. Setiap elemen mempunyai "konteks" (fikirkan halaman pada papan lukisan) di mana sebarang bentuk boleh dilukis. Pelayar menyokong berbilang konteks kanvas dan menyediakan keupayaan lukisan grafik melalui .

Kebanyakan penyemak imbas menyokong konteks kanvas 2D - termasuk Opera, Firefox, Konqueror dan Safari. Selain itu, beberapa versi Opera turut menyokong kanvas 3D, dan Firefox juga boleh menyokong kanvas 3D melalui pemalam:

• Muat turun Opera yang menyokong kanvas 3D, video HTML
  
dan Fail I/O
• Artikel tentang konteks kanvas Opera 3D
• Artikel tentang kanvas 3D Firefox
  Konteks

Artikel ini memperkenalkan asas kanvas 2D
dan cara menggunakan fungsi kanvas asas, seperti garisan, bentuk, imej dan teks, dsb. Untuk memahami artikel ini, anda lebih baik mengetahui asas JavaScript.

Anda boleh klik di sini untuk memuat turun contoh kod artikel ini secara berkelompok

asas kanvas

Kaedah untuk mencipta kanvas adalah sangat mudah, cuma tambah <font face="NSimsun"><canvas><u></u></canvas></font>dalam HTML<font face="NSimsun"><canvas></canvas></font> halaman > Elemen:

<code><canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas></code>

Untuk merujuk elemen dalam JavaScript, sebaiknya tetapkan ID untuk elemen tersebut, anda juga perlu menetapkan ketinggian dan lebar kanvas.

Selepas mencipta kanvas, mari sediakan berus. Untuk melukis grafik dalam kanvas anda memerlukan JavaScript. Mula-mula cari elemen kanvas<font face="NSimsun"> getElementById</font> melalui fungsi <font face="NSimsun"> getElementById<br></font>, dan kemudian mulakan konteks. Pelbagai grafik kemudiannya boleh dilukis menggunakan API konteks. Skrip berikut melukis segi empat tepat dalam kanvas (klik di sini untuk melihat kesannya):

<code>// Get a reference to the element.
var elem = document.getElementById('myCanvas');

// Always check for properties 和 methods, to make sure your code doesn't break 
// in other browsers.
if (elem && elem.getContext) {
  // Get the 2d context.
  // Remember: you can only initialize one context per element.
  var context = elem.getContext('2d');
  if (context) {
    // You are done! Now you can draw your first rectangle.
    // You only need to provide the (x,y) coordinates, followed by the width and 
    // height dimensions.
    context.fillRect(0, 0, 150, 100);
  }
}</code>

Anda boleh meletakkan kod di atas dalam bahagian <font face="NSimsun">head<code><font face="NSimsun">head</font> dokumen, atau dalam fail luaran.

API konteks 2D

Selepas memperkenalkan cara membuat kanvas, mari kita lihat API kanvas 2D dan lihat apa yang boleh dilakukan dengan fungsi ini.

Barisan Asas

Contoh di atas menunjukkan betapa mudahnya untuk melukis segi empat tepat.

Anda boleh menetapkan isi dan garisan segi empat tepat dengan mudah melalui sifat fillStyle dan strokeStyle. Nilai warna menggunakan kaedah dan nombor heksadesimal, (), () dan () (jika penyemak imbas menyokongnya, seperti Opera10 dan Firefox 3). Nombor heksadesimal, (), () dan () (jika disokong oleh penyemak imbas, seperti Opera10 dan Firefox 3).

Dengan <font face="NSimsun">fillRect<code><font face="NSimsun">fillRect</font> anda boleh melukis segi empat tepat yang diisi. Gunakan <font face="NSimsun">strokeRect<code><font face="NSimsun">strokeRect</font> untuk melukis segi empat tepat dengan hanya jidar dan tanpa isian. Jika anda ingin mengosongkan sebahagian daripada kanvas, anda boleh menggunakan <font face="NSimsun">clearRect<code><font face="NSimsun">clearRect</font>. Parameter bagi tiga kaedah di atas adalah sama: x, y, lebar, tinggi. Dua parameter pertama menetapkan koordinat (x,y) dan dua parameter terakhir menetapkan ketinggian dan lebar segi empat tepat.

Anda boleh menggunakan atribut lineWidth untuk menukar ketebalan garisan. Mari lihat menggunakan <font face="NSimsun">fillRect<code><font face="NSimsun">fillRect</font>,
<font face="NSimsun">strokeRect<code><font face="NSimsun">strokeRect</font> clearRect<code><font face="NSimsun">clearRect</font> dan contoh lain:

<code>context.fillStyle   = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth   = 4;

// Draw some rectangles.
context.fillRect  (0,   0, 150, 50);
context.strokeRect(0,  60, 150, 50);
context.clearRect (30, 25,  90, 60);
context.strokeRect(30, 25,  90, 60);</code>

Penyampaian contoh ini ditunjukkan dalam Rajah 1.

Rajah 1: fillRect, strokeRect dan
clearRect rendering

Laluan

Sebarang bentuk boleh dilukis melalui laluan kanvas. Anda boleh melukis garis besar dahulu, kemudian sempadan dan isi. Membuat bentuk tersuai adalah mudah, gunakan <font face="NSimsun"> beginPath()<code><font face="NSimsun"> beginPath()</font> untuk mula melukis, kemudian gunakan garisan, lengkung dan bentuk lain untuk melukis bentuk anda. Selepas melukis, panggil <font face="NSimsun">isi<code><font face="NSimsun">fill</font> dan <font face="NSimsun">stroke<code><font face="NSimsun">stroke</font> untuk menambah isian atau tetapkan sempadan . Panggil <font face="NSimsun"> closePath()<code><font face="NSimsun"> closePath()</font> untuk menamatkan lukisan grafik tersuai.

Berikut ialah contoh melukis segitiga:

<code>// Set the style properties.
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);

// Done! Now fill the shape, 和 draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();</code>

Rendering ditunjukkan dalam Rajah 2.

图 2: 三角形

另一个较负责的例子中使用了直线、曲线和圆弧。

插入图像

<font face="NSimsun">drawImage</font> 方法允许在 canvas 中插入其他图像
(<font face="NSimsun"> img</font> 和 <font face="NSimsun">canvas</font> 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数：

• 3个参数：最基本的 <font face="NSimsun">drawImage</font> 使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
• 5个参数：中级的 <font face="NSimsun">drawImage</font> 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
• 9个参数：最复杂 <font face="NSimsun">drawImage</font> 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

下面是上述三个使用方法的例子：

<code>// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(<var>img_elem</var>, <var>dx</var>, <var>dy</var>);

// Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
context.drawImage(<var>img_elem</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>);

// Nine arguments: the element, source (x,y) coordinates, source width and 
// height (for cropping), destination (x,y) coordinates, and destination width 
// and height (resize).
context.drawImage(<var>img_elem</var>, <var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>);</code>

其效果见图3.

图 3: <font face="NSimsun">drawImage</font> 效果图。

像素级操作

2D Context API 提供了三个方法用于像素级操作：<font face="NSimsun">createImageData</font>, <font face="NSimsun">getImageData</font>, 和
<font face="NSimsun">putImageData</font>。

<font face="NSimsun">ImageData</font>对象保存了图像像素值。每个对象有三个属性: width, height 和
data。data 属性类型为CanvasPixelArray，用于储存<font face="NSimsun"><var>width</var>*<var>height</var>*4</font>个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至
255，包括alpha在内!)。像素的顺序从左至右，从上到下，按行存储。

为了更好的理解其原理，让我们来看一个例子——绘制红色矩形

<code>// Create an ImageData object.
var imgd = context.createImageData(50,50);
var pix = imgd.data;

// Loop over each pixel 和 set a transparent red.
for (var i = 0; n = pix.length, i </code>

注意: 不是所有浏览器都实现了<font face="NSimsun"> createImageData</font>。在支持的浏览器中，需要通过<font face="NSimsun"> getImageData</font> 方法获取<font face="NSimsun"> ImageData</font> 对象。请参考示例代码。

通过 <font face="NSimsun">ImageData</font> 可以完成很多功能。如可以实现图像滤镜，或可以实现数学可视化 (如分形和其他特效)。下面特效实现了简单的颜色反转滤镜：

<code>// Get the <code>CanvasPixelArray</code> from the given coordinates and dimensions.
var imgd = context.getImageData(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>);
var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i ImageData</code> at the given (x,y) coordinates.
context.putImageData(imgd, <var>x</var>, <var>y</var>);

图 4 显示了使用此滤镜后的 Opera
图像 (图 3是原图)。

图 4: 颜色反转滤镜

文字

虽然最近的 WebKit 版本和 Firefox 3.1 nightly build 才开始支持 Text API ，为了保证文章完整性我决定仍在这里介绍文字 API 。

<font face="NSimsun">context</font> 对象可以设置以下 text 属性：

• <font face="NSimsun">font</font>：文字字体，同属性 属性
• <font face="NSimsun">textAlign</font>：文字水平对齐方式。可取属性值: <font face="NSimsun">start</font>, <font face="NSimsun">end</font>, <font face="NSimsun">left</font>,
  <font face="NSimsun">right</font>, <font face="NSimsun">center</font>。默认值:
  <font face="NSimsun">start</font>.
• <font face="NSimsun">textBaseline</font>：文字竖直对齐方式。可取属性值：<font face="NSimsun">top</font>, <font face="NSimsun">hanging</font>, <font face="NSimsun">middle</font>,
  <font face="NSimsun">alphabetic</font>, <font face="NSimsun">ideographic</font>, <font face="NSimsun">bottom</font>。默认值：<font face="NSimsun">alphabetic</font>.

有两个方法可以绘制文字： <font face="NSimsun">fillText</font> 和 <font face="NSimsun">strokeText</font>。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的
(x,y) 坐标的相对位置。

下面是一个在 canvas 中绘制"hello world" 文字的例子

<code>context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  ('Hello world!', 0, 0);
context.font         = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);</code>

图 5 是其效果图。

图 5: 文字效果

阴影

目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为：

• <font face="NSimsun">shadowColor</font>：阴影颜色。其值和 CSS 颜色值一致。
• <font face="NSimsun">shadowBlur</font>：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
• <font face="NSimsun">shadowOffsetX</font> 和 <font face="NSimsun">shadowOffsetY</font>：阴影的 x 和 y 偏移量，单位是像素。

下面是 canvas 阴影的例子：

<code>context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';
context.fillRect(20, 20, 150, 100);</code>

其效果见图 6。

图 6: canvas 阴影效果——蓝色矩形，红色阴影

颜色渐变

除了 CSS 颜色，<font face="NSimsun"> fillStyle</font> 和 <font face="NSimsun">strokeStyle</font> 属性可以设置为 <font face="NSimsun">CanvasGradient</font> 对象。——通过 <font face="NSimsun">CanvasGradient</font>可以为线条和填充使用颜色渐变。

欲创建 <font face="NSimsun">CanvasGradient</font> 对象，可以使用两个方法：<font face="NSimsun">createLinearGradient</font> 和 <font face="NSimsun">createRadialGradient</font>。前者创建线性颜色渐变，后者创建圆形颜色渐变。

创建颜色渐变对象后，可以使用对象的 <font face="NSimsun">addColorStop</font> 方法添加颜色中间值。

下面的代码演示了颜色渐变使用方法：

<code>// You need to provide the source 和 destination (x,y) coordinates 
// for the gradient (from where it starts 和 where it ends).
var gradient1 = context.createLinearGradient(<var>sx</var>, <var>sy</var>, <var>dx</var>, <var>dy</var>);

// Now you can add colors in your gradient.
// The first argument tells the position for the color in your gradient. The 
// accepted value range is from 0 (gradient start) to 1 (gradient end).
// The second argument tells the color you want, using the CSS color format.
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue

// For the radial gradient you also need to provide source
// 和 destination circle radius.
// The (x,y) coordinates define the circle center points (start 和 
// destination).
var gradient2 = context.createRadialGradient(<var>sx</var>, <var>sy</var>, <var>sr</var>, <var>dx</var>, <var>dy</var>, <var>dr</var>);

// Adding colors to a radial gradient is the same as adding colors to linear 
// gradients.</code>

我也准备了一个更复杂的例子，使用了线性颜色渐变、阴影和文字。其效果见图 7。

图 7: 使用线性颜色渐变的例子

canvas 演示

如果你想知道使用 Canvas可以做些什么，可以参看以下的工程：

• Opera Widget：
  • SimAquarium
  • Artist's
    Sketchbook
  • Spirograph
• 在线工程和演示
  • Newton polynomial
  • Canvascape - "3D Walker"
  • Paint.Web - painting
    demo, open-source
  • Star-field
    flight
  • Interactive blob

小节

Canvas 是 HTML 5最让人期待的特性之一，目前已获得大部分 Web 浏览器支持。Canvas 可以帮助创建游戏、增强图形用户界面。2D context
API 提供大量图形绘制功能——我希望通过本文你了解了 canvas 使用，并且你有兴趣了解更多！