最近忙里偷闲,来写的这篇文章,但是中午出去吃个饭,回来因为自己的误操作,把上午的文章全删除了,还没法找回。
小编真的是瞬间觉得整个人生都灰暗了。
心塞,这次真的不想多说什么了。
————- 我是华丽的分割线————–
终于把这篇文章写完了,关于本文,针对读者主要是之前从未接触过 Canvas 的同学。当然,你要学 canvas 一定要有 JS 基础啦。
其次就是,因为前前后后耽误了两天时间,可能在书写和描述中出现一些小的纰漏,请各位读者老爷见谅。
最后,也希望这篇文章能够对迷茫的你产生一些帮助,感谢。
是 html5 中重要的元素, 和 audio、video 元素类似完全不需要任何外部插件就能够运行.
Canvas 中文翻译就是 "画布". 它提供了强大的图形的处理功能 (绘制, 变换, 像素处理…)。
但是需要注意,canvas 元素本身并不绘制图形,它只是相当于一张空画布。
如果开发者需要向 canvas 上绘制图形,则必须使用 JavaScript 脚本进行绘制。
大多数现代浏览器都是支持 Canvas 的, 比如 Firefox, safari, chrome, opera 的最近版本以及 IE9 都支持.
IE8 及以下不支持 HTML5, 但是我们可以进行提示用户更新到最新的版本
在 HTML 页面上定义 canvas 元素与定义其他普通元素并无任何不同,它吃了可以指定 id, style ,class ,hidden 等通用属性之外,还可以设置 width 和 height 两个属性。
为什么要特意去说这个呢?
咱们在 章节 2.2 中详细去说明。
除此之外,我们在网页中定义 canvas 元素之后,它只是一张空白的画布,想要在画布上绘画,一定要经过下面几步。
那么我们就来开始我们的 canvas 实战,来看看 canvas 该如何会绘制图形。
我们在上面也说明了,我们的一些浏览器是不支持 canvas 的,这个时候我们应该怎么去做呢?
这时候我们可以直接在 canvas 标签之间去书写内容,这么做的好处是当你的浏览器不支持 canvas 的时候,我们可以去展示标签之间的内容,具体如下。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style type="text/CSS">
- html,body{ margin: 0px; } canvas{ background: #ccc; }
- </style>
- </head>
- <body>
- <canvas>
- 我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
- </canvas>
- </body>
来源: http://lib.csdn.net/article/javascript/45165