Fatal编程技术网
  • javascript/
  • Javascript 绘制不带笔划的部分路径，带笔划的部分路径

Javascript 绘制不带笔划的部分路径，带笔划的部分路径

javascript html canvas

Javascript 绘制不带笔划的部分路径，带笔划的部分路径,javascript,html,canvas,Javascript,Html,Canvas,我正在使用canvas元素和JavaScript 该路径具有填充和笔划。然而，我只想将笔划应用于路径的一部分 我已经创建了一个JSFIDLE，它显示了我所绘制的形状，并带有注释，解释了哪些零件应该或不应该被抚摸 如何使路径的某些部分没有笔划 我一直在使用： function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); c

我正在使用
canvas
元素和
JavaScript

该路径具有填充和笔划。然而，我只想将笔划应用于路径的一部分

我已经创建了一个JSFIDLE，它显示了我所绘制的形状，并带有注释，解释了哪些零件应该或不应该被抚摸

如何使路径的某些部分没有笔划

我一直在使用：

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();
提前感谢您的帮助。

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

因此，要获得可选笔划其线段的路径，必须：

  • 单独绘制每个线段，并应用笔划或不应用笔划

  • 重新绘制整个路径并填充它

顺便说一句，您应该以context.beginPath（）开始所有路径绘制命令。如果不是，则自上次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>


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var点=[]；
点推（{x:10，y:200，isStroked:false}）；
点.push（{x:10，y:150，isStroked:false}）；
点推（{x:110，y:30，isStroked:true}）；
push（{x:210，y:50，isStroked:true}）；
push（{x:210，y:200，isStroked:false}）；
点推（{x:10，y:200，isStroked:false}）；
绘制（点“红色”、“蓝色”，3）；
函数绘制（点、笔划、填充、线宽）{
ctx.strokeStyle=冲程；
ctx.线宽=线宽；
ctx.fillStyle=填充；
//划

对于（var i=1；我非常感谢你。对我来说，真正的解决方案是两条画两条分开的路径，一条用于笔划，一条用于填充！我还学到了一些关于
beginPath（）
。再次感谢你！