Cavas的beginPath对绘制路径的影响

时间：2016-01-12 15:23:01 阅读：112 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
    <canvas id="drawing" style="background-color:#FFC" width="1530" height="800">
        canvas有自己的宽高，背景色。canvas就是一张画布
    </canvas>
    
    <script>
        var canvas = document.getElementById("drawing");
        var ctx = canvas.getContext("2d");
        
        ctx.lineWidth = 20;
        
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.moveTo(150, 100);
        ctx.lineTo(550, 100);
        ctx.strokeStyle = "red";
        ctx.stroke();
        
        //ctx.beginPath();
        ctx.lineWidth = 8;
        ctx.moveTo(150, 200);
        ctx.lineTo(550, 200);
        ctx.strokeStyle = "blue";
        ctx.stroke();
        
        
    </script>
</body>
</html>