html5学习笔记 -- canvas

<canvas id="gbCanvas" width="300" height="400"></canvas>
var canvas = document.getElementById('gbCanvas'); // 这里通过gbCanvas获取canvas对象
context = canvas.getContext('2d'); //这里通过canvas获取处理API的上下文context
context.beginPath(); //开始准备绘制新的图形
context.moveTo(150, 100); //开始设置起始绘制坐标位置
context.lineTo(300, 200); //开始设置直线绘制结束的坐标位置
context.lineWidth = 20;   //设置直线粗细为20px
context.strokeStyle = '#DD4814'; //设置直线颜色
context.lineCap = 'butt'; //绘制按钮类型默认butt，其他'round'圆角，'square'正方形
context.stroke(); //开始正式绘制一条直线

 //定义曲线的相关设置属性
    var x = 200, y = 150, radius = 60, startAngle = 0.5*Math.PI, endAngle = 1.5*Math.PI, counterClockWise = false;
    context.beginPath();
    context.arc( x, //定义圆心x坐标
                      y, //定义圆心y坐标
                      radius, //半径
                      startAngle, //起始角度
                      endAngle, //结束角度
                      counterClockWise //是否是逆时针方向
                      );
     context.strokeStyle = 'black';

     context.lineWidth = 15;