将 HTML5 Canvas 笔划切换为实线、虚线和荧光笔

如何解决将 HTML5 Canvas 笔划切换为实线、虚线和荧光笔

我正在构建的网络绘画/绘图应用程序的下一个问题是如何在实线、虚线和荧光笔之间选择和切换笔触类型。

这是在 JavaScript 中完成的，但为了提供上下文，所有相关代码都在下面。

我遇到的问题是切换不起作用。我认为这是因为我没有按照正确的顺序设置透明度和颜色等属性，但我尝试了一些组合。

虚线根本不起作用。荧光笔类型的作品，但它是一个不完整的荧光笔。

canvas.css:

.canvas { 边框：1px 实心 #000； 光标：十字准线； 背景颜色：#ccc； 宽度：100%； 高度：100%； }

topnav.css：

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #222;
  font-family: Arial;
  width: 100%;
  border: 1px solid #000;
  vertical-align: middle;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,.dropdown:hover .dropbtn {
  background-color: #212;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.navbar span {
  float: left;
  color: white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.color-selector-circle {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
}

canvas.html：

<link rel="stylesheet" href="css/topnav.css">

<div class="navbar">
  <a href="http://wwwww.com"><img src='favicon.ico' height='30px' width='30px' ></a>
  <a href="#selSettings"><img src='images/Navigator.png' width='40px' height='40px'></a>
  <a href="#selText"><img src='images/Text.png' width='40px' height='40px'></a>
  <div class="dropdown">
    <button class="dropbtn"><img src='images/Pen.png' width='40px' height='40px'>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="javascript:selPen('solid');"><img src='images/HardPen.png' width='40px' height='40px'></a>
      <a href="javascript:selPen('dotted');"><img src='images/DottedPen.png' width='40px' height='40px'></a>
      <a href="javascript:selPen('hilight');"><img src='images/Highlighter.png' width='40px' height='40px'></a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn"><img src='images/Shapes.png' width='40px' height='40px'>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#selSquare">Square</a>
      <a href="#selRect">Rectangle</a>
      <a href="#selCircle">Circle</a>
      <a href="#selEllipse">Ellipse</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn"><img src='images/Lines.png' width='40px' height='40px'>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#selSolidLine">Solid</a>
      <a href="#selDottedLine">Dotted</a>
      <a href="#selArrowLine">Arrow</a>
      <a href="#selArrow2Line">Double Arrow</a>
    </div>
  </div>
  <span class='color-selector-circle' id='white' style='background-color: white'> </span>
  <span class='color-selector-circle'  id='black' style='background-color: black'> </span>
  <span class='color-selector-circle'  id='red' style='background-color: red'> </span>
  <span class='color-selector-circle'  id='blue' style='background-color: blue'> </span>
  <span class='color-selector-circle'  id='green' style='background-color: green'> </span>
  <span class='color-selector-circle'  id='yellow' style='background-color: yellow'> </span>
  <span class='color-selector-circle'  id='magenta' style='background-color: magenta'> </span>
</div>

<link rel="stylesheet" href="css/canvas.css">

<canvas id="canvas" style="display: block;">
   Sorry,your browser is rubbish.
</canvas>
<script type="text/javascript"  src='js/canvas.js'></script>

canvas.js：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 5;
var start = 0;
var end = Math.PI * 2;
var dragging = false;
var scolor = 'red';

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

document.querySelector(".navbar").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("color-selector-circle")) {
    scolor = tgt.id;
  }  
})

function selPen(pname) {
  if (pname == 'solid') context.setLineDash([0,0]);
  if (pname == 'dotted') context.setLineDash([15,15]);
  if (pname == 'hilight') context.globalAlpha = 0.3;
}

var putPoint = function(e) {
  if (dragging) {
    context.strokeStyle = scolor;
    context.fillStyle = scolor;
    context.lineTo(e.offsetX,e.offsetY);
    context.stroke();
    context.beginPath();
    context.arc(e.offsetX,e.offsetY,radius,start,end);
    context.fill();
    context.beginPath();
    context.moveTo(e.offsetX,e.offsetY);
  }
}

var engage = function(e) {
  dragging = true;
  putPoint(e);
}

var disengage = function() {
  dragging = false;
  context.beginPath();
}

canvas.addEventListener('mousedown',engage);
canvas.addEventListener('mousemove',putPoint);
canvas.addEventListener('mouseup',disengage);

解决方法

当我自己运行它时，它运行得不是很好，因为 context.arc(e.offsetX,e.offsetY,radius,start,end); 在它刚刚绘制的线上绘制了一个圆圈，大部分时间都覆盖了虚线。而且，这可能与因为每次鼠标移动时它都在绘制小的新线有关，并且每次开始新路径时它可能会重新启动虚线图案或其他东西。

在我过去在程序中使用横线笔的经验中，他们只是简单地画画，然后不画画，然后画画，等等。即便如此， 自由形成的虚线总是看起来有点时髦。