<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;margin-left:40%;margin-top:20%"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="#0000ff";
//设置开始坐标
ctx.moveTo(0,0);
//设置结束坐标
ctx.lineTo(200,100);
//绘制线条
ctx.stroke();
//重新开始一条路径使颜色不互相影响
ctx.beginPath();
//设置笔触的颜色
ctx.strokeStyle="red";
//设置开始坐标
ctx.moveTo(20,30);
//设置结束坐标
ctx.lineTo(100,30);
//context.lineCap="butt|round|square"; 向两端线条添加 默认/圆形/方形的边缘
ctx.lineCap="round";
//context.lineJoin="bevel|round|miter"; 两条线终点相交时的拐角 默认(斜角)/圆角/尖角
ctx.lineJoin="miter";
//设置线条宽度
ctx.lineWidth=10;
//绘制线条
ctx.stroke();
//设置填充颜色
ctx.fillStyle="#0000ff";
//设置字体样式
ctx.font="30px Arial";
//绘制实心字体
ctx.fillText("Hello World",10,50);
//绘制空心字体
</script>
</body>
</html>
用三个点画一条折线
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();