context.clearRect(0,0,width,height);//对一个矩形画面进行刷新
context.beginPath();//起始路径
context.moveTo(100,100);
context.lineTo(700,700);//起始坐标为100,100，终点坐标为700,700
context.lineTo(100,700);
context.lineTo(100,100);
context.clostPath();//路径结束，如果没有这行代码时，图形不封闭则不会自动封闭 context.lineWidth=5;//线条宽度为5个像素
context.strokeStyle="#005588"//线条颜色
context.stroke();//执行线条绘制
/*
context.fillStyle="rgb(2,100,30)"//填充颜色
context.fill();//执行填充
*/
context.beginPath();//起始路径
context.moveTo(200,200);
contex.lineTo(700,600);
context.clostPath();
context.strokeStyle="black"
context.stroke();
//绘制弧形和圆形
contex.arc(
centerx,centery,radius,//圆心坐标和半径
startAngle,endingAngle,//其实弧度和终止弧度
anticlockwise=true//值为true是为逆时针绘制
)
context.arc(300,200,200,0,1.5*Math.PI,true);//圆心坐标300,200，半径200，其实弧度0，终止弧度为1.5派，逆时针绘制
绘制动画效果
setInterval(
function(){
render();
update();
}
50//时间
);
//绘制二次方贝塞尔曲线
context.strokeStyle="black";
context.beginPath();
context.moveTo(0,200);//起始点
context.quadraticCurveTo(75,50,300,200);//控制点，终点，用户绘制二次方贝塞尔曲线 //context.bezierCurveTo(25,50,75,50,300,200);//前四个为两个控制点，后面为终点坐标 context.globalCompositeOperation="source-over";
//保存canvas状态
context.save();
//回复保存的canvas
context.restore();
context.translate(80,80);//将图形的原点坐标移动到80，80
context.rotate(Math.PI*0.5);//图形旋转
context.scale(0.95,0.95);//缩放图形
//矩阵变换
context.tran sform(m11,m12,m21,m22,dx,dy);
x' = (m11)x+(m21)y+dx;
y' = (m12)x+(m22)y+dy;
context.globalAlpha = "0.4"//设置图形透明度
context.globalCompositeOperation="source-over";//source-over为默认值，默认新的图形在原的图形之上
context.clip();//裁切路径
lineWidth=value//线段宽度
lineCap=type;//端点类型，butt，round，square//平头，圆头，方头
lineJoin=type;//两条线段连接点的效果round,bevel,miter//圆角，方角，直角 //创建阴影
context.shadowOffsetX=float;//x轴偏移
context.shadowOffsetY=float;//y轴偏移
context.shadowBlur=float;//阴影羽化程度
context.shadowColor=color;//阴影颜色，默认为黑色
//插入图片
var img = new Image();
img.src = 'img/icon.png';
var ptrn = context.createPattern(img,'repeat');
context.fillStyle =ptrn;
//绘制线性渐变
var liner = contex.createLinearGradient(0,0,0,200);//起始坐标和宽度
addColorStop(0.5，'#ff0000');
//绘制径向渐变
context.createRadialGradient(x1,y1,r1,x2,y2,r2);//初始圆心坐标和半径，终点圆心坐标和