canvas绘制路径

      beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色。
    x:x坐标
    y:y坐标
    每次画线都从moveTo的点到lineTo的点,
    如果没有moveTo那么第一次lineTo的效果和moveTo一样,
    每次lineTo后如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="800" height="850">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
context.beginPath();// 开始路径绘制
context.strokeStyle = "rgb(250,0,0)";// 设置线的颜色
context.fillStyle = "rgb(250,0,0)"
//实验证明第一次lineTo的时候和moveTo功能一样
context.lineTo(100, 100);// 设置路径起点
//之后的lineTo会以上次lineTo的节点为开始
context.lineTo(200, 200);
context.lineTo(200, 100);
context.moveTo(200, 50);
context.lineTo(100,50);
context.stroke();// 进行线的着色,这时整条线才变得可见
</script>
</body>
</html>

效果:

canvas绘制路径


      还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

</script>

</body>
</html>

效果:

canvas绘制路径
线条样式:
     lineCap 设置或返回线条的结束端点样式
     lineJoin 设置或返回两条线相交时,所创建的拐角类型
     lineWidth 设置或返回当前的线条宽度
     miterLimit 设置或返回最大斜接长度

你可能感兴趣的:(canvas)