html5Canvas学习笔记(1)矩形

原文来自林伟健个人博客

笔者最近在学习html5的有关知识，学习到了Canvas画布部分，这部分内容相当有趣，使用画布可以在浏览器画出各种各样的图案。今天，笔者学习了3种类型矩形、圆形、直线的画法,现在这里讲一下矩形

在画图案前，先要获取对象：

var canvas=document.getElementById('canvas');
if(canvas==undefined){
return false;
}
var cx=canvas.getContext('2d');

 

当然还有几个属性要知道的：
          cx.fillStyle=”Red”;//代表将要填充的颜色
          cx.strokeStyle=”Black”;//代表将要描边的颜色
          cx.lineWidth=1;//代表将要描边的线宽

矩形

矩形所用到的2个函数：
         cx.fillRect(x,y,width,height);//这是填充矩形的函数
         cx.strokeRect(x,y,width,height);//这是对矩形进行描边的函数
其中：x代表矩形距原点(画布左上角)的x轴距离，y代表矩形距原点(画布左上角)的y轴距离，width和height代表矩形宽和高

var canvas=document.getElementById('canvas');
if(canvas==undefined){
return false;
}
var cx=canvas.getContext('2d');//获取画布的对象
cx.fillStyle="yellow";//填充颜色
cx.strokeStyle="Black";//描边颜色
cx.lineWidth=1;//描边线宽
cx.fillRect(50,50,100,100);//在坐标(50,50)填充一个长和宽都是100的矩形
cx.strokeRect(50,50,100,100);//在坐标(50,50)描边一个长和宽都是100的矩形

 

结果画出来是这样的：

关于矩形还有一个clearRect的方法，它相当于一个橡皮擦，可以擦去矩形的区域，只不过这个橡皮擦擦出来的也是一个矩形

         cx.clearRect(x,y,width,height);//这是填充矩形的函数

var canvas=document.getElementById('canvas');
if(canvas==undefined){
return false;
}
var cx=canvas.getContext('2d');//获取画布的对象
cx.fillStyle="yellow";//填充颜色
cx.strokeStyle="Black";//描边颜色
cx.lineWidth=1;//描边线宽
cx.fillRect(50,50,100,100);//在坐标(50,50)填充一个长和宽都是100的矩形
cx.strokeRect(50,50,100,100);//在坐标(50,50)描边一个长和宽都是100的矩形
cx.clearRect(75,75,50,50);//擦去区域

 

结果画出来是这样的：