绘制矩形
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)运行结果如下所示
