html - 将 HTML5 Canvas 笔触切换为实线、点线和荧光笔

问题描述

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

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

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

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

画布.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,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;
}

画布.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>

画布.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);

标签： htmlhtml5-canvaspen

html - 将 HTML5 Canvas 笔触切换为实线、点线和荧光笔

问题描述

解决方案

推荐阅读