canvas基础教程知识（1）

基本用法：使用canvas，必须设定width和height，置顶图形大小区域。不可在style中设定宽高。

在body中：

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

接下来要在整块画布中绘图，就要去的上下文联系，需要调用getContext（）方法。

js：

    var drawing = document.getElementById("canvas");

    var context = drawing.getContext("2d");

绘制矩形：方法fillRect(x,y,width,height)矩形的x坐标矩形的月坐标，矩形的宽高。

context.fillRect(10,10,200,200);

//给矩形填充颜色fillStyle:属性值可以是字符串、渐变对象或模糊对象；

context.fillStyle = "#ccc"；

完整代码：（1）一个填充的矩形

var drawing = document.getElementById("canvas");

var context = drawing.getContext("2d");

context.fillRect(10,10,200,200);

context.fillStyle = "#ccc"；

（2）描边矩形：strokeStyle:属性值可以是字符串、渐变对象或模糊对象；

var drawing = document.getElementById("canvas");

var context = drawing.getContext("2d");

context.fillRect(10,10,200,200);

context.strokeStyle = "red";

简单矩形绘制第一讲结束