【HTML5】学习记录---Canvas （day1）

1.什么是Canvas？

• canvas 是 HTML5 提供的一个用于展示绘图效果的标签
• HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
• 画布是一个矩形区域，可以控制其每一像素。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.创建Canvas标签

<canvas id="myCanvas" width="600" height="400"></canvas>

• 此标签只能展示绘图内容，不能进行绘图。
• canvas的兼容性， IE9及其以上版本的浏览器，才支持canvas标签 。

3.通过JavaScript来绘制

• canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

3.1 画一个简单的红色矩形

<script type="text/javascript">
  var c=document.getElementById("myCanvas");   //使用id来寻找canvas元素
  var cxt=c.getContext("2d");   //创建Context对象

  /*下面两行绘制红色矩形*/
  cxt.fillStyle="#FF0000";
  cxt.fillRect=(0,0,150,75);
</script>

效果如图

• getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
• fillStyle() 设置或返回用于填充绘画的颜色、渐变或模式，将其染成红色。
• fillRect() 方法绘制“被填充”的矩形，规定了形状、位置和尺寸。

4.一些Canvas的方法和属性

5.浏览器支持

• Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

• Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

简单的总结：
在朋友的推荐下今天是第一次在这里写这种文章，这大概只能算是一篇小小的学习记录，并没有什么技术含量，我的文笔很差，写不出来很华丽的东西，但是偶尔写写，大概也对自己知识积累写作提升有很大帮助吧。
通过对canvas的学习，知道了它好像是个不得了的东西，今天只是初步的了解了它的一些基础知识，不懂的东西还很多，接下来也会继续学习提升自己。