Question

shadow()的目的是创建一条线条，其中用户选择的颜色后面是黑色线条。但是，当用户在画布上拖动线条时，尤其是从右向左拖动时，黑色线条会在原始颜色上断断续续

我实现了与在画布上创建线条以在shadow()中创建黑色尾线的方法相同的方法，只是更改了属性shadowOffset，lineJoin和lineCap为了产生黑线效果。

#c {
  border: 1px solid black;

table{
    float:left;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Canvas</title>
  <link href="canvas.css" rel="stylesheet">
</head>

<body>
   <h2>STYLES:</h2>
    <form>
    <input type="button" value="shadow" onclick="shadow()">
    </form>

    <canvas id="c"></canvas>
</body>

<script src="canvas.js"></script>
<script src="colors.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</html>

const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default settings
ctx.strokeStyle = "black";
ctx.lineWidth = 15;

let confirmButton = document.querySelector(".confirm");

window.addEventListener('load', () => {


  let painting = false;

  //when mouse is clicked; paint
  function mousedown(b) {
    painting = true;
    //allows for paint to appear without nedding to drag mouse
    mousemove(b);
  }
  //when mouse is not clicked; don't paint
  function mouseup() {
    painting = false;
    //resets path each time so multiple can be created
    ctx.beginPath();
  }

  function mousemove(b) {
    //Get correct mouse position
    var pos = getMousePos(c, b);
    //if not holding down the mouse; nothing happens
    if (!painting) return;
    //roundness of paint
    ctx.lineCap = 'round';

    //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
    ctx.lineTo(pos.x, pos.y);
    //end the stroke and visualize paint
    ctx.stroke();
    //begins a new paint so that everything doesn't just stick to a fat line
    ctx.beginPath();
    //move the new line to wherever the mouse goes
    ctx.moveTo(pos.x, pos.y);
  }

  //starting posistion of paint line
  c.addEventListener('mousedown', mousedown);
  //ending posistion of paint line
  c.addEventListener('mouseup', mouseup);
  //whenever the mouse is moving; paint 
  c.addEventListener('mousemove', mousemove);

  confirmButton.addEventListener('click', size);
});

function size() {
   numS = document.getElementById("sizeInput").value;
  ctx.lineWidth = numS;
  console.log("blah "+ ctx.lineWidth)
}


function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function shadow(){ 

  let sc =  ctx.shadowColor = 'rgb(0, 0, 0)';   

  let painting = false;

  //when mouse is clicked; paint
  function mousedown(b) {
    painting = true;
    sc = true;
    //allows for paint to appear without nedding to drag mouse
    mousemove(b);
  }
  //when mouse is not clicked; don't paint
  function mouseup() {
    painting = false;
    sc = false;
    //resets path each time so multiple can be created
    ctx.beginPath();
  }

  function mousemove(b) {
    //Get correct mouse position
    var pos = getMousePos(c, b);
    //if not holding down the mouse; nothing happens
    if (!painting) return;
    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;

    //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
    ctx.lineTo(pos.x, pos.y,);
    //end the stroke and visualize paint
    ctx.stroke();
    //begins a new paint so that everything doesn't just stick to a fat line
    ctx.beginPath();
    //move the new line to wherever the mouse goes
    ctx.moveTo(pos.x, pos.y,);
  }

  //starting posistion of paint line
  c.addEventListener('mousedown', mousedown);
  //ending posistion of paint line
  c.addEventListener('mouseup', mouseup);
  //whenever the mouse is moving; paint 
  c.addEventListener('mousemove', mousemove);
}

发生的事情是，黑色的尾线会截断原始色线，从而产生断断续续的效果。我只显示了与此问题相关的代码，但为清楚起见，我在plunker上重新创建了该项目： https://plnkr.co/edit/0gP32ZSf0ZlOVguTj51X?p=preview

文件color.js与该问题无关

Answer 1

canvas.js上的功能杂乱无章，我无法弄清您在这里做什么...
这是带有阴影按钮的简单画布

const c = document.querySelector("#c");
const ctx = c.getContext("2d");

ctx.strokeStyle = "red";
ctx.lineWidth = 6;

window.addEventListener('load', () => {
  function mousemove(b) {
    var pos = getMousePos(c, b);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
  }

  c.addEventListener('mousemove', mousemove);
});


function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function shadow() {
  ctx.shadowBlur = 2;
  ctx.shadowOffsetX = 6
  ctx.shadowColor = 'black';
}

<canvas id="c"></canvas><br>
<input type="button" value="shadow" onclick="shadow()">

样式字体的黑色会通过原始行进行裁剪

1 个答案: