HTML5 canvas 绘制线条方法

用三个点画一条折线

ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(0,0);
//设置中间坐标
ctx.lineTo(100,50);
//设置结束坐标
ctx.lineTo(200,60);
//绘制线条

ctx.stroke();

绘制一条虚线

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var xp = 4;//最小长度
var yp = 2;//最小长度


var beginx = 0;//开始横坐标
var beginy = 0;//开始纵坐标
var beginz = 4;//开始第一个点横坐标
var beginw = 2;//开始第一个点纵坐标
var times = 0;
drows(beginx,beginy,beginz,beginw);
function drows(x,y,z,w){
if(x+xp<200){
ctx.lineWidth=2;
//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(x,y);
//设置中间坐标
ctx.lineTo(z,w);
//设置结束坐标
ctx.stroke();
x=x+xp;
y=y+yp;
z=z+xp;
w=w+yp;
times++;

if(times%2==0){

}else{
x=x+xp;
y=y+yp;
z=z+xp;
w=w+yp;
times++;
}
drows(x,y,z,w);

}

}

设置两条线的转角

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(0,0);
//设置结束坐标
ctx.lineTo(50,60);
//设置线条宽度
ctx.lineTo(200,0);
ctx.lineWidth=10;


ctx.lineJoin="miter";


//绘制线条

ctx.stroke();

绘制一个圆或者圆点

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();