图文详解如何用html5 canvas画一条直线

　　首先给大家介绍用canvas绘制直线需要用到的属性

　　moveTo(x,y)可以设置线条开始位置的坐标

　　lineTo(x,y)可以设置线条结束位置的坐标

　　lineWidth可以设置线条的宽度

　　strokeStyle可以设置线条的颜色

　　用canvas绘制直线，步骤详解：

　　1、用<canvas>标签在浏览器上定义一张画布，并给其一个ID名，可以根据自己的需要设置画布的大小、背景颜色等。

　　2、用varc=document.getElementById("myCanvas")获取canvas元素

　　3、通过varctx=c.getContext("2d")创建一个context对象

　　4、设置直线的起点和终点，开始位置moveTo(25,25)，结束位置lineTo(175,175)

　　5、可以用ctx.lineWidth=5设置线条的宽度，ctx.strokeStyle="red"设置线条的颜色

　　6、最后用ctx.stroke()画一条直线，就完成了

　　具体代码如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<canvasid="myCanvas"width="200px"height="200px"style="border:1pxsolid#000000;"></canvas>

　　</body>

　　<scripttype="text/javascript">

　　varc=document.getElementById("myCanvas");

　　varctx=c.getContext("2d");

　　ctx.moveTo(25,25);

　　ctx.lineTo(175,175);

　　ctx.lineWidth=5;

　　ctx.strokeStyle="red";

　　ctx.stroke();

　　</script>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54444.shtml