canvas教程

HTML5 Canvas入门学习教程_html5教程技巧-H5教程

字号+ 作者:H5之家 来源:H5之家 2017-12-20 15:13 我要评论( )

HTML5 Canvas入门学习教程_html5教程技巧-H5教程

HTML5

究竟什么是HTML5?在W3C HTML5的常见问题中,关于HTML5是这样说明的:HTML5是一个开放的平台下开发的免费许可条款。
具体来说,对这句话有以下两种理解:

指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的,且随时间变化的。
指HTML5规范,当然也是开放式网络平台的一部分。


Canvas的浏览器支持
以下我列出了最流行的Web浏览器以及它们开始支持Canvas元素的最小版本号。

Safari Firefox IE Chrome Opear iOS Safari Android Brower

3.2 3.5 9 9 10.6 3.2 2.1


这里我推荐使用Chrome。

简单的HTML5页面

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

演示运行结果如下:

2016317110813836.jpg (850×500)

HTML是由一个个形如尖括号<>的标签元素组成,这些标签通常是成对出现,并且标签之间只能嵌套不能交叉。
扩展:
成对出现的叫做闭合标签,单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合,但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签,如<body>是开始标签,</body>是结束标签。自标签如<input/> <br/>等。
关于更多的标签,建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。

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

  • 这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范,这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。

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

  • 这是包含语言说明的<html>标签,例如,"en"为英语,"zh"为中文。

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

  • 这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是<title>标记符和<meta>标记符。

    以下表格列出了HTML head 元素下的所有标签和功能:

    标签 描述

    <head> 定义了文档的信息

    <title> 定义了文档的标题

    <base> 定义了页面链接标签的默认链接地址

    <link> 定义了一个文档和外部资源之间的关系

    <meta> 定义了HTML文档中的元数据

    <script> 定义了客户端的脚本文件

    <style> 定义了HTML文档的样式文件


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

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

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

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

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

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

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

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

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

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

    运行结果:

    2016317111155702.jpg (850×500)

    对以上代码有几点说明:

    1.添加了<p>标签,将<canvas>包裹其中,个人习惯,暂时并没有什么卵用。
    2.给<canvas>标签指定了width和height属性,规定了它的宽和高。
    3.给<canvas>标签添加了一个内联样式,使其变为块级元素并居中显示。

    关于CSS的内容这里不做说明,毕竟这不是本课程的主角,若做扩展会花费大量篇幅。

    引用Canvas元素


    文档对象模型(DOM)
    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
    文档对象模型代表了在 HTML 页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被 Web 浏览器渲染之后再次更新。用户可以通过 JavaScript 访问 DOM。
    在开始使用<canvas>前,首先需要了解两个特定的 DOM 对象:window 和 document。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]

      canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]

      2017-12-21 08:00

    • Python flask wtforms从画布dataurl而不是form.input.data读取图

      Python flask wtforms从画布dataurl而不是form.input.data读取图

      2017-12-19 17:00

    • 微信小程序,小程序论坛,weixin,微信小程序canvas绘制坐标图

      微信小程序,小程序论坛,weixin,微信小程序canvas绘制坐标图

      2017-12-19 12:02

    • 关于canvas处理图片的问题

      关于canvas处理图片的问题

      2017-12-19 10:22

    网友点评