5分钟学会Canvas基础.docx

五分钟学会Canvas基础 　　关于本文五分钟学会Canvas基础，主要针对的读者是之前从未接触过 Canvas的同学。当然，你要学 canvas 一定要有 JS 基础啦。其次就是，因为作者写的比较匆忙，可能在书写和描述中出现一些小的纰漏，请各位读者见谅。最后，也希望这篇文章能够对迷茫的你产生一些帮助，感 谢。 　　一、Canvas简介 　　1.1 Canvas是什么? 　　Canvas是HTML5中重要的元素，和audio、video元素类似完全不需要任何外部插件就能够运行。Canvas中文翻译就是”画布”，它提供了强大的图形的处理功能(绘制,变换,像素处理…)。 　　但是需要注意，Canvas元素本身并不绘制图形，它只是相当于一张空画布。如果开发者需要向Canvas上绘制图形，则必须使用JavaScript脚本进行绘制。 　　1.2 Canvas能够做什么? 　　???基础图形的绘制 　　???文字的绘制 　　???图形的变形和图片的合成 　　???图片和视频的处理 　　???动画的实现 　　???小游戏的制作 　　1.3 Canvas支持的浏览器 　　大多数现代浏览器都是支持Canvas的，比如 Firefox，Safari，Chrome，Opera的最近版本以及IE9都支持。IE8及以下不支持HTML5，但是我们可以进行提示用户更新到最新的版本。 　　1.4 关于Canvas标签的基本概念 　　在 HTML 页面上定义Canvas元素与定义其他普通元素并无任何不同，它吃了可以指定 id, style ,class ,hidden 等通用属性之外，还可以设置 width 和 height 两个属性。 　　为什么要特意去说这个呢?咱们在章节2.2中详细去说明。除此之外，我们在网页中定义 canvas 元素之后，它只是一张空白的画布，想要在画布上绘画，一定要经过下面几步。 　　1. 获取 canvas 元素对应的 DOM 对象，这必须是一个 canvas 对象 　　2. 调用 canvas 对象的 getContext( ) 方法,该方法返回一个 canvasRenderingContext2D 对象，该对象可以绘制图形。 　　3. 调用 canvasRenderingContext2D 对象的方法进行绘图。 　　那么我们就来开始我们的canvas 实战，来看看 canvas 该如何会绘制图形。 　　二、Canvas实战 　　2.1 查看当前浏览器对Canvas的支持情况 　　我们在上面也说明了，我们的一些浏览器是不支持Canvas的，这个时候我们应该怎么去做呢? 　　这时候我们可以直接在 canvas 标签之间去书写内容，这么做的好处是当你的浏览器不支持 canvas 的时候，我们可以去展示标签之间的内容，具体如下。 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style type=text/css html,body{ margin: 0px; } canvas{ background: #ccc; } /style/headbody canvas 我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas /canvas/body/html INCLUDEPICTURE \d /uploads/allimg/160715/13-160G509501O31.jpg \* MERGEFORMATINET  　　既然已经创建完成了具体的内容，那我们现在可以看见了么? 　　我们虽然没有给定 canvas 的宽度和高度，但是实际上我们的canvas 在页面中是可见的。 　　需要注意，canvas 默认样式的宽度和高度 是 300px * 150px. 　　即使我们不去设置具体的宽度和高度，它也是可以显示的。 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style type=text/css html,body{ margin: 0px; } canvas{ background: #ccc; } /style/headbody canvas 我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas /canvas/body/html INCLUDEPICTURE \d /uploads/al