canvas速查

/**
*绘制直线
*/
function drawLine(){
var oCanvas = document.createElement('canvas');
var context = oCanvas.getContext('2d');
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();
document.body.appendChild(oCanvas);
}


/**
*绘制矩形
*/
function drawRect(){
var oCanvas = document.createElement('canvas');
oCanvas.height = 200;
var context = oCanvas.getContext('2d');
context.fillStyle = 'black';
context.fillRect(0,0,200,200);
document.body.appendChild(oCanvas);
}


/**
*绘制矩形轮廓
*/
function drawStrokeRect(){
var oCanvas = document.createElement('canvas');
oCanvas.height = 200;
var context = oCanvas.getContext('2d');
context.strokeStyle = 'red';
context.strokeRect(0,0,200,200);
document.body.appendChild(oCanvas);
}


/**
*绘制圆形
*/
function drawCircle(){
var oCanvas = document.createElement('canvas');
var context = oCanvas.getContext('2d');
context.fillStyle = 'blue';
context.beginPath();
context.arc(100, 75, 50, 0, Math.PI*2, true);
context.closePath();
context.fill();
document.body.appendChild(oCanvas);
}


/**
*绘制圆形轮廓
*/


function drawCircleStroke(){
var oCanvas = document.createElement('canvas');
var context = oCanvas.getContext('2d');
context.strokeStyle = 'blue';
context.beginPath();
context.arc(100, 75, 50, 0, Math.PI/2, true);
context.stroke();
document.body.appendChild(oCanvas);
}
drawLine();
drawRect();
drawStrokeRect();
drawCircle();
drawCircleStroke();