Question

我正在使用canvas元素和JavaScript

绘制路径

路径有填充和笔划。但是我只想将笔划应用到路径的某些部分。

我创建了一个JSFiddle，它显示了我一直在绘制的形状，并附有注释，说明哪些部分应该或不应该被描边。

如何让路径的某些部分没有中风？

我一直在使用：

function draw() 
{  
    var canvas = document.getElementById("canvas");  
    var ctx = canvas.getContext("2d");

    ctx.strokeStyle = 'red';
    ctx.lineWidth = 3;
    ctx.fillStyle = 'blue';

    ctx.moveTo(10, 200); // the starting point

    ctx.lineTo(10, 150); // I want this to have no stroke
    ctx.lineTo(110, 30); // stroked line
    ctx.lineTo(210, 50); // stroked line

    ctx.stroke(); // end our stroke here


    ctx.lineTo(210, 200); // line without a stroke
    ctx.fill();
}

draw();

提前感谢您的帮助。

Answer 1

您只能在beginPath（）和fill（）/ stroke（）之间获得1个样式。

因此，要获得一个可选择地描绘其片段的路径，您必须：

单独绘制每个片段，是否应用笔画。
重绘整个路径并填充它。

BTW，您应该使用context.beginPath（）开始所有路径绘制命令。如果没有，那么自上次开始路径以来的所有绘图也将在每个笔划/填充期间重新绘制。

以下是示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    var points=[];
    points.push({x:10,y:200,isStroked:false});
    points.push({x:10,y:150,isStroked:false});
    points.push({x:110,y:30,isStroked:true});
    points.push({x:210,y:50,isStroked:true});
    points.push({x:210,y:200,isStroked:false});
    points.push({x:10,y:200,isStroked:false});

    draw(points,"red","blue",3);

    function draw(points,stroke,fill,linewidth){
        ctx.strokeStyle=stroke;
        ctx.lineWidth=linewidth;
        ctx.fillStyle=fill;

        // draw strokes
        for(var i=1;i<points.length;i++){
            var p=points[i];
            if(p.isStroked){
                ctx.beginPath();
                ctx.moveTo(points[i-1].x,points[i-1].y);
                ctx.lineTo(points[i].x,points[i].y);
                ctx.stroke();            
            }
        }

        // draw fill
        ctx.beginPath();
        ctx.moveTo(points[0].x,points[0].y);
        for(var i=1;i<points.length;i++){
            ctx.lineTo(points[i].x,points[i].y);
        }
        ctx.fill();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

绘制部分路径，不划线，部分划线

1 个答案: