HTML5 Canvas入门学习教程

2019-01-28 15:24:47刘景俊

这个标签说明 Web 浏览器使用的字符编码模式,这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。

XML/HTML Code复制内容到剪贴板
  1. <title>...</title>   

这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记,它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。

XML/HTML Code复制内容到剪贴板
  1. <body>...</body>   

网页中显示的实际内容均包含在这2个<body>之间。
综上,HTML5网页是由第一行的<!doctype html>与<html>部分组成,而<html>主要分为两部分——由<head>标签规定的头部部分,和由<body>规定的主体部分。
这样,我们就把最简单的HTML网页的基本结构给捋出来了。

添加一个Canvas
在HTML中添加Canvas非常简单,只需要在HTML的<body>部分,添加上<canvas>标签就可以了!可以参考下面的代码。

XML/HTML Code复制内容到剪贴板
  1. <!doctype html><html lang="zh"><head><meta charset="UTF-8"><title>基础的HTML5页面</title> </head>   <body>  
  2.     <canvas id="canvas">       你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  3.     </canvas></body>     </html>  

由于结果页面是一个完完全全的空白页面,所以这里我就不贴图了。大家可能会很好奇,为什么会是一个空白呢?(废话,我还没来得及画画呢!)Canvas的本意是画布,也就是画布的意思(废话...),画布在HTML5中是透明的,是不可见的。
那<canvas>标签中的那段文本是什么意思呢?那是一旦浏览器执行HTML页面时不支持Canvas,就会显示这段文字,换言之,只要你的浏览器支持Canvas,页面上就不会显示这个文本。
那<canvas>中的id是什么意思?id是标签的属性之一,在JavaScript代码中用来指定特定的<canvas>的名字,就像一个人的身份证号码一样,是唯一的。
为了更清楚的展示Canvas,以及方便之后的演示,我稍微修改了一下代码,之后的绘图都会在这个Canvas上绘制。

XML/HTML Code复制内容到剪贴板