绘制矩形

HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect()、strokeRect()和clearRect()。这些函数的语法格式如下所示：

context.fillRect(x,y,width,heigth);//绘制矩形，以当前的fillStyle来填充

context.strokeRect(x,height);//绘制矩形，以当前的strokeStyle来填充

context.clearRect(x,height);//清除指定区域的像素

上述语法中都包含四个参数，第一个参数表示矩形起点的横坐标；第二个参数表示矩形起点的纵坐标；第三个参数表示矩形的宽度；第四个参数表示矩形的高度；坐标原点是canvas画布的左上角。

绘制矩形常用属性fillStyle和strokeStyle。fillStyle表示填充样式，在该属性中可以设置填充的颜色值；strokeStyle表示图形边框的样式，在该属性中可以设置边框的颜色值。另外这两个属性除了可以设置css外，还可以分别是图案和颜色渐变。

(1)添加canvas元素

(2)页面加载时直接调用脚本

function AddJuxing1(){

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

if(canvas && canvas.getContext){

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

context.fillStyle="yellow";

context.strokeStyle="green";

context.lineWidth=1;

context.fillRect(30,100,200,100);

context.strokeRect(30,100);

}

}

window.addEventListener("load",AddJuxing1,true);

绘制直线

想要绘制直线需要使用路径，同绘制矩形一样，绘制开始时需要获取图形上下文对象。绘制矩形之外的其他图形时常用函数如下所示

beginPath()：开始创建路径

moveTo(x，y)：不绘制，只是将当前的位置移动到新的目标坐标，并且作为线条开始点

lineTo(x，y)：绘制线条到指定的目标坐标(x，y)，且在两个坐标之间画一条直线

stroke()：绘制图形的边框

fill()：填充一个实心图形，当调用该方法时开放的路径会自动闭合，而无需调用closePath函数

closePath()：关闭路径

使用上面的函数绘制图形时，首先使用路径勾勒图形轮廓，然后设置颜色进行绘制，具体步骤如下所示：

(1)调用beginPath()函数创建路径

(2)创建图形的路径

(3)调用closePath函数关闭路径，这一步不是必须的

(4)设定绘制样式，然后调用fill()或stroke()函数绘制路径

下面通过一个简单的示例演示如何使用上述函数绘制直线

(1)页面中那个添加三个canvas元素，分别用于绘制不同的直线

(2)页面加载时调用javascript脚本

function addzhi1(){

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

if(canvas && canvas.getContext){

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

context.beginPath();//开始路径

context.lineWidth=1;//设置直线宽度为1

context.moveTo(20,100);//设置坐标起点

context.lineTo(150,100);//设置目标坐标

context.stroke();//调用stroke()函数绘制

}

}

function addzhi2(){

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

if(canvas && canvas.getContext){

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

context.beginPath();//开始路径

context.lineWidth=2;//设置直线宽度为1

context.moveTo(160,50);//设置坐标起点

context.lineTo(50,100);//设置目标坐标

context.lineTo(160,185);//设置目标坐标

context.stroke();//调用stroke()函数绘制

}

}

function addzhi3(){

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

if(canvas && canvas.getContext){

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

context.beginPath();//开始路径

context.lineWidth=3;//设置直线宽度为1

context.moveTo(160,185);//设置目标坐标

context.fill();//调用fill()函数绘制

}

}

window.addEventListener("load",addzhi1,true);

window.addEventListener("load",addzhi2,addzhi3,true);

(3)运行结果如下图所示：

绘制三角形

对上面的案例已经可以看出，绘制三角形只需将三个点组成的路径闭合即可，在上面的案例中，第二个canvas元素的脚本中添加context.lineTo(160,50)，运行结果如下所示：

绘制圆形

使用canvas API中上下文对象的函数除了可以绘制直线、矩形、三角形外，还可以绘制圆形，绘制圆形时使用arc()函数，该函数基本语法如下所示：

context.arc(x,radius,startAngle,endAngle,anticlockwise);

上述代码中arc()函数主要包括六个参数，前两个参数x和y分别表示绘制圆形的起点横坐标和纵坐标；radius表示绘制圆形的半径；startAngle表示开始角度；endAngle表示结束角度；anticlockwise表示是否按照顺时针反向进行绘制

在canvas元素的API中绘制半径与弧时所指定的参数为开始弧度与结束弧度，如果习惯使用角度，可以使用如下方法将弧度转换为角度；

var radians = degress*180/Math.PI;

Math.PI即π，表示的角度为180°

注：arc()函数不仅可以绘制圆形，也可以用来绘制圆弧。使用时必须指定开始角度与结束角度，这两个参数据诶的那个了弧度。anticlockwise参数为一个布尔值的参数，当参数值为true时表示按照逆时针方向绘制，否则为顺时针方向绘制。

下面一个示例使用canvas元素及API中的常用内置函数实现圆形和圆弧的简单绘制，基本步骤如下所示：

(1)添加四个canvas元素，分别用来显示不同的圆形和圆弧

(2)页面加载时调用javascript脚本

function getcontext(id){

var canvas = document.getElementById(id);

if(canvas && canvas.getContext){

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

return context;

}

}

function add1(){

var context = getcontext("add1");

context.beginPath();

context.arc(80,80,60,Math.PI,Math.PI*2,true);

context.stroke();

}

function add2(){

var context = getcontext("add2");

context.beginPath();

context.arc(80,(Math.PI*2/4),true);

context.fill();

}

function add3(){

var context = getcontext("add3");

context.beginPath();

context.arc(80,(Math.PI*2/4)*3,false);

context.stroke();

}

function add4(){

var context = getcontext("add4");

context.beginPath();

context.strokeStyle="blue";

context.arc(80,false);

context.stroke();

}

window.addEventListener("load",add1,add2,add3,add4,true);

(3)运行结果如下所示