QbatyBlog

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); //获得getContext的引用
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true); //外面的圆
ctx.strokeStyle = "#000"; //设置圆的颜色
ctx.stroke(); //画出这个圆
 
ctx.beginPath(); //开始另一条路径
ctx.lineWidth = 4; 
ctx.moveTo(120,120);
ctx.lineTo(90,120);
ctx.moveTo(180,120);
ctx.lineTo(210,120);
ctx.stroke();
 
ctx.beginPath();
ctx.strokeStyle = "#999";
ctx.lineWidth = 20;
ctx.moveTo(105,122);
ctx.lineTo(105,200);
ctx.moveTo(195,122);
ctx.lineTo(195,200);
ctx.stroke();
 
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = "#000";
ctx.moveTo(120,220);
ctx.bezierCurveTo(130,200,150,240,180,220);
ctx.stroke();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,60,70);
ctx.moveTo(30,30);
ctx.lineTo(20,40);
ctx.moveTo(50,30);
ctx.lineTo(60,40);
ctx.rect(30,50,20,20);
ctx.stroke();