java canvas类画直线_Html5新特性 <canvas>画板画直线



以下样例为用canvas标签画多条直线

index_three

您的浏览器不支持canvas标签。

//获取Canvas对象(画布)

var canvas = document.getElementById("myCanvas");

//简单地检測当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){

//获取相应的CanvasRenderingContext2D对象(画笔)

var ctx = canvas.getContext("2d");

//线条的颜色

ctx.strokeStyle="#FF9933";

//线条的宽度像素

ctx.lineWidth=10;

//线条的两关形状

ctx.lineCap="round";

//注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。

//開始一个新的绘制路径

ctx.beginPath();

//定义直线的起点坐标为(10,10)

ctx.moveTo(50, 50);

//定义直线的终点坐标为(50,10)

ctx.lineTo(350, 250);

ctx.moveTo(50, 240);

ctx.lineTo(360, 60);

ctx.moveTo(50, 200);

ctx.lineTo(300, 40);

//沿着坐标点顺序的路径绘制直线

ctx.stroke();

//关闭当前的绘制路径

ctx.closePath();

}