HTML5 Canvas 起步(1) - 基本概念
作者：xujiwei 来源：xujiwei博客 发布时间：2009-04-21 13:14:00
什么是Canvas
<canvas> 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。
尽管在 Mozilla 已经有不少关于 Canvas 的教程，我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白，那么你可以在参考资料中找到 Mozilla 网站上 Canvas 教程的链接。
另外，可以在这里找到一些有趣的 Canvas 示例。
开始使用 Canvas
使用 Canvas 很简单，与使用其他 HTML 元素一样，只需要在页面中添加一个 <canvas> 标签即可：
<canvas id="screen" width="400" height="400"></canvas>
当然，这样只是简单的创建了一个 Canvas 对象而已，并没有对它进行任何操作，这个时候的 canvas 元素看上去与 div 元素是没什么区别的，在页面上什么都看不出来：）
另外，canvas 元素的大小可以通过 width 与 height 属性来指定，这与 img 元素有点相似。
[#xujiwei.cn]
Canvas 的核心：Context
前面说到可以通过 JavaScript 来操作 Canvas 对象来进行绘制图形、合成图像等操作，这些操作并不是通过 Canvas 对象本身来进行的，而是通过 Canvas 对象的一个方法 getContext 获取 Canvas 操作上下文来进行。也就是说，在后面我们使用 Canvas 对象的过程中，都是与 Canvas 对象的 Context 打交道，而 Canvas 对象本身可以用来获取 Canvas 对象的大小等信息。
要获取 Canvas 对象的 Context 很简单，直接调用 canvas 元素的 getContext 方法即可，在调用的时候需要传递一个 Context 类型参数，目前可以用的并且是唯一可以用的类型值就是 2d：
0
投稿猜你喜欢
- 对于有的vps，系统默认安装了mysql。我们需要从我们的服务器、vps上卸载(移除)默认的mysql。那么如何(怎样)在ubuntu\De
- <!doctype html> <html> <head> <meta content="
师父布置的任务，让我写一个服务练练手，搞清楚socket的原理和过程后跑了一个小demo，很有成就感，代码内容也比较清晰易懂，很有教育启发意- 首先mysql更新数据的某个字段，一般这样写：UPDATE mytable SET myfield = 'value' WH
- 高阶函数高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足下列一个条件的函数：接受一个或多个函数作为输
- 看python社区大妈组织的内容里边有一篇讲python内存优化的，用到了__slots__。然后查了一下，总结一下。感觉非常有用pytho
- 本人在CentOS6.4上安装万mysql后，无法通过root进入，因为安装的时候，并没有设置root密码，似乎有个初始随机密码，但是不记得
- Python 文件操作的详解及实例一、文件操作1、对文件操作流程打开文件，得到文件句柄并赋值给一个变量通过句柄对文件进行操作关闭文件现有文件
- 傅立叶变换时数字信号处理的重要方法之一，是法国数学家傅立叶在1807年在法国科学学会上发表的一篇文章中所提出的，在文章中使用了正弦函数描述温
- 起步这是一个相当实用的内置模块，但是很多人竟然不知道他的存在——笔者也是今天偶然看到的，哎……尽管如此，还是改变不了这个模块好用的事实hea
- 这篇文章主要介绍了基于Python实现扑克牌面试题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- import csvfor line in open("test.csv"):name,age,birthday = l
- Vue实践分享（三）在实际项目的开发过程中，经常会遇到页面还没渲染完成而插件就已经开始加载的问题，这样就会导致显示和功能出错。可以通过Vue
- 我就废话不多说了，大家还是直接看代码吧~package mainimport ("fmt""net/url&q
- 一、表单效验规则的使用1、自定义效验规则介绍是否必填： required: true || fasle
- 何为聚类分析聚类分析或聚类是对一组对象进行分组的任务，使得同一组（称为聚类）中的对象（在某种意义上）与其他组（聚类）中的对象更相似（在某种意
- 解析器解析器的作用就是服务端接收客户端传过来的数据，把数据解析成自己想要的数据类型的过程.本质就是对请求体中的数据进行解析.Content-
- 本文实例为大家分享了python比特币初始配置的具体代码，供大家参考，具体内容如下# -*- coding: utf-8 -*- "
- 从matplotlib工具栏源码探析一（禁用工具栏、默认工具栏和工具栏管理器三种模式的差异）一文可知matplotlib内置实现了多个工具项
- 有2种方法：一、 QML中定义一个信号，连接Python里的函数；这里的函数不用特意指明为槽函数，普通函数即可。QML的信号连接Python
