五分钟学会Canvas基本.docxVIP

五分钟学会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=enheadmeta charset=UTF-8titleDocument/titlestyle type=text/css html,body{ margin: 0px; } canvas{ background: #ccc; } /style/headbodycanvas 我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas/canvas/body/html　　既然已经创建完成了具体的内容，那我们现在可以看见了么?　　我们虽然没有给定 canvas 的宽度和高度，但是实际上我们的canvas 在页面中是可见的。　　需要注意，canvas 默认样式的宽度和高度 是 300px * 150px.　　即使我们不去设置具体的宽度和高度，它也是可以显示的。!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/titlestyle type=text/css html,body{ margin: 0px; } canvas{ background: #ccc; } /style/headbodycanvas 我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas/canvas/body/html　　那我们该如何去修改画布的默认大小呢?　　2.2 修改 Canvas 的画布　　按照我们正常的思路来说，我们会直接去使用 canvas_1.style.width = 500px; 来去修改我们的 canvas 的宽度，但是这样真的对么？　　答案当然是否定的，canvas 相当于是一张图片，如果我们设置 canvas width=500 height=500.　　这样写相当于图片的实际大小是