<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';
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;