开发者学堂课程【HTML5 新特性学习：HTML5 画布】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/396/detail/5049
HTML5 画布
内容介绍：
一、画布
二、示例
一、画布:
画布是一个矩形区域,可以控制其每一像素
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
二、示例
创建一个 index，创建一个 <canvas> 标签
输入 <canvas id = “canvas” width = “400px” height = “400px”></canvas>
进行测试，因为没有给颜色，所有测试看到的是一个空白页，但是可以通过 Inspect Element 审查元素找到
可以看到选中 canvas 时，在左侧有一个400*400的区域，这个区域就是画布，接下来可以添加一个颜色
<canvas id = “canvas” width = “400px” height = “400px” style = “background-color: #77000”></canvas>
绘制一个图形，添加 <script>
<script>
var c = document.getElementById(“canvas”);
var cxt = c.getContext(“2d”);
cxt.fillStyle = “#ff0000”;
cxt.fillRect(0, 0, 100, 100);
</script>
进行测试
可以看到出现一个100*100的红色图形，选中 canvas，canvas 本身是一个400*400的
绘制一个圆形，删除 cxt.fillRect(0, 0, 100, 100) 输入:
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI*2, true);
cxt.closePath();
cxt.fill();
进行测试
接下来绘制图片，在桌面上有一个1.png 的图片，创建一个叫 images 的文件夹，拷贝 1.png，删除
cxt.fillStyle = “#ff0000”;
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI*2, true);
cxt.closePath();
cxt.fill();
输入：
var img = new Image();
img.onload = function() {
cxt.drawImage(img, 0, 0);
}
img.src = “images/1.png”;
进行测试
