如何增加线的粗细？

Question

我正在尝试增加在html5画布中通过鼠标移动绘制的线条的粗细

 var x = null;
 var y = null;
 var c = null;
 var ctx = null;


 function getPos(e) {

     if(x == null) {
         x=e.clientX;
         y=e.clientY;
       }

     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(e.clientX,e.clientY);
     ctx.stroke();
     x=e.clientX;
     y=e.clientY;
    }


  window.onload = function(){
   c=document.getElementById("Canvas1");
   ctx=c.getContext("2d");
}

https://codepen.io/anon/pen/GLgLbV

Answer 1

这种方式：

ctx.lineWidth = 10;

Answer 2

请更新您的代码

ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(e.clientX,e.clientY);
ctx.lineWidth = 2; // Please add this
ctx.stroke();
x=e.clientX;
y=e.clientY;