canvas的学习笔记1
<canvas>是html5中的中新增的，一个可以使用脚本（JavaScript）在其中绘制图像dehtml元素，他可以用来绘制照片集或者制作简单的动画。
<canvas>标签必须要有闭合的标签</canvas>
canvas的默认的宽度为300，高度为150，单位为px，颜色为黑色，默认没有边框和内容。样式可以在canvas中进行设置，也可以在css样式中进行设置，是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。
创建一个画布
注意、标签通常需要一个id属性（脚本js经常饮用）
1、在body中书写canvas标签，并进行给出id、宽高
<body>
<canvas id="huaban" width="300" height="400"></canvas>
</body>
2、设置canvas的边框线，由于默认不显示（这个可以些、也可以不写）
<style>
canvas{
border: 1px solid red;
}
</style>
3、js部分
<script type="text/jscript">
4、创建一个函数
function draw (){
5、获取页面中canvas元素
var canvas =document.getElementById("huaban")
6、创建canvas对象，获取2d的上下文对象
getContext('2d')对象是内建的html5对象,拥有多种绘制路径、矩形,圆形,字符以及添加图形
var ctx=canvas.getContext('2d')
}
7、一定要调用函数
draw()
</script>
具体的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>canvas的学习</title>
<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="huaban" width="300" height="400"></canvas>
</body>
<script type="text/jscript">
function draw(){
// 3、获取canvas元素
var canvas = document.getElementById("huaban")
4、创建context对象。 获取2d的上下文对象
var ctx=canvas.getContext('2d')
}
draw()
</script>
</html>
