HTML中canvas的使用

使用canvas时，在HTML中注意插入canvas的位置

将<script>方法，放在body<canvas></cancas> 下面

因为chrome下需要文档载入完成后才能获得canvas对象

2.在js中写对应代码

（1）绘制矩形边框

第一种方法

var cavl=document.getElementById('mr-cav');
var cav=cavl.getContext('2d');
cav.beginPath();
cav.strokeStyle='red';
cav.strokeRect(300,50,100,90);


//第二种方式
var cavl=document.getElementById('mr-cav');
var cav=cavl.getContext('2d');
cav.beginPath();
cav.strokeStyle='red';
cav.rect(300,50,100,90);
cav.stroke();

  （2）绘制矩形，填充色为红色，用fill替代stroke即可