Canvas入门（一）

一、Canvas简介

HTML5 Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不像SVG图像那样可以被缩放大小。在网页上使用canvas元素时，他会创建一块矩形的区域。默认情况下该区域宽为300像素，高为150像素，但也可以自定义大小或者设置canvas元素的其他特性。如下我们可以在HTML5页面的最基本的canvas元素。

<canvas></canvas>

在页面中加入了canvas元素后，我们便可以通过JavaScript来自由的控制它。可以在其中添加图片，线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。

使用canvas变成，首相要获取其上下文（context）。接着在上下文中执行动作，最后将这些动作应用到上下稳重。可以将canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务

二、canvas坐标

如上图所示，canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿着垂直方向向下延伸。左上角的坐标为x=0，y=0的点称为原点。

三、浏览器对HTML5 Canvas的支持情况：

随着IE9的到来，所有浏览器厂商现在都提供了对HTML5 Canvas的支持，而且它已被大多数用户所掌握。这是Web开发史上一个重要的里程碑，它使得2D绘图在现代网络上蓬勃发展。

尽管旧版本IE占有的市场份额正在逐渐缩小，但在使用Canvas API之前，我们还是应该首先检测浏览器是否支持HTML5 Canvas。

四、检测浏览器支持情况：

在创建canvas元素之前，首先要确保浏览器能够支持他。如果不支持，你就要为那些古董级级浏览器提供一些替代文字。

<script type=”text/javascript”> window.onload = function(){ try{ document.createElement("canvas").getContext("2d"); document.getElementById("support").innerHTML="支持Canvas"; }catch(e){ document.getElementById("support").innerHTML="不支持Canvas"; } }; </script> <h1 id="support"></h1>

上边的代码尝试在页面中创建一个canvas对象，并获取其上下文。如果发生错误则在页面的h1标签中显示不支持Canvas，否则显示支持Canvas。

 

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源，欢迎大家关注尚硅谷公众号（atguigu）了解更多。