H5 绘制图形中的矩形以及圆形

注：所有绘制图形的代码均存在于js中，是通过写js来控制canvas所展示的内容

1、绘制矩形

以下是绘制矩形的步骤：（可以一个矩形里套一个矩形）

1. 取canvas：var canvas = document.getElementById(id);
2. 取上下文context：var context = canvas.getContext('2d');声明该图形是2D,不存在3D或4D
3. 填充（fill）与绘制边框(stroke)
4. 设定样式（style）:a---填充图形（fillStyle） b---图形边框（strokeStyle），此时的样式只是指颜色
5. 指定线宽：lineWidth，不带单位
6. 绘制图形，通过这两个函数，使得该矩形在canvas上显示：fillRect & strokeRect

代码：

function draw(id) {
    var canvas = document.getElementById(id);
    if (canvas == null)
        return false;
    var context = canvas.getContext('2d');
    矩形笑脸
    context.fillStyle = 'yellow';
    context.strokeStyle = "black";
    context.lineWidth = 10;
    context.fillRect(0, 0, 400, 300);
    context.strokeRect(0, 0, 400, 300)
    context.fillStyle = "blue";
    context.strokeStyle = "black";
    context.lineWidth = 10;
    context.fillRect(50, 50, 50, 50);
    context.strokeRect(50, 50, 50, 50);
    context.clearRect(50, 50, 50, 50); //清除绘制矩形的内容
    context.fillStyle = "blue";
    context.strokeStyle = "black";
    context.lineWidth = 10;
    context.fillRect(270, 50, 50, 50);
    context.strokeRect(270, 50, 50, 50);
    context.clearRect(270, 50, 50, 50);
    context.fillStyle = "red";
    context.strokeStyle = "black";
    context.lineWidth = 5;
    context.fillRect(140, 170, 100, 50);
    context.strokeRect(140, 170, 100, 50);
}

效果图：

2、绘制圆形

以下是绘制矩形的步骤：

1. 取得canvas以及context
2. 开始创建图形的路径：context.beginPath();
3. 创建图形的路径：

   context.arc(x, y, radius, startAngle, endAngle,anticlockwise );
   x:绘制的起点横坐标
   y:绘制的起点纵坐标
   radius：圆的半径
   startAngle:开始角度
   endAngle：结束角度(如果结束角度为 Math.PI * 2，则是一个完整的圆)
   anticlockwise ：是否逆时针(true：按逆时针绘制;false:则按顺时针)
   

4. 路径创建完成后，关闭路径：context.closePath();
5. 设定样式，调用绘制方法，绘制路径：

   context.fillStyle = 'rgba(225,0,0,0.25)';
   context.fill();

6. 如果想要画椭圆，则将arc改成ellipse:context.ellipse(x, y, radiusX, radiusY, tation,startAngle, endAngle,anticlockwise );

代码：

function draw(id) {
    var canvas = document.getElementById(id);
    if (canvas == null)
        return false;
    var context = canvas.getContext('2d');
    context.fillStyle = "#EEEEEF";
    context.fillRect(0, 0, 400, 300);

    //一组圆
    var n = 0;
    for (var i = 0; i < 10; i++) {
        context.beginPath();
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(225,0,0,0.25)';
        context.fill();
    }

    //单个圆
    context.beginPath();
    context.arc(200, 150, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = 'rgba(225,0,0,0.25)';
    context.fill();
}

效果图：