下面例子为用canvas标签画多条直线_H5之家 - 中国HTML5教程资源分享第一站

当前位置 : 首页> 网页制作

下面例子为用canvas标签画多条直线

代码如下:

<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >

<head>

<title>index_three</title>

<body >

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

</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();

}

</script>

</body>

</html>

更多网页制作信息请查看：网页制作