HTML5 Canvas 笔划有黑点

Question

我举了一个简单的 HTML5 canvas 实现的例子，它展示了如何做到这一点，但它只有一种颜色（黑色）。

我添加了更改笔划颜色的功能，但无论颜色如何 select 生成的笔划都是 'punctuated' 带有间歇性黑点。如果以较慢的速度绘制笔划，则点会靠得很近以产生 'wormish' 效果，但如果快速绘制，则点会间隔开。

如果我只是简单地点击一个（画一个点），颜色总是黑色。

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 = black;

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

context.lineWidth = radius * 2;

function sColor(cname) {
  scolor = cname;
}

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.lineTo(e.offsetX, e.offsetY);
    context.stroke();
    context.strokeStyle = scolor;
    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);

.canvas {
  border: 1px solid #000;
  cursor: crosshair;
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

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

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

.color-selector-circle {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
}

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

<div class="navbar">
  <a href="javascript:sColor('white');"><span class='color-selector-circle' style='background-color: white'> </span></a>
  <a href="javascript:sColor('black');"><span class='color-selector-circle' style='background-color: black'> </span></a>
  <a href="javascript:sColor('red');"><span class='color-selector-circle' style='background-color: red'> </span></a>
  <a href="javascript:sColor('blue');"><span class='color-selector-circle' style='background-color: blue'> </span></a>
  <a href="javascript:sColor('green');"><span class='color-selector-circle' style='background-color: green'> </span></a>
  <a href="javascript:sColor('yellow');"><span class='color-selector-circle' style='background-color: yellow'> </span></a>
  <a href="javascript:sColor('magenta');"><span class='color-selector-circle' style='background-color: magenta'> </span></a>
</div>

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

Answer 1

您需要相同的 strokeStyle 和 fillStyle

而var scolor = black;应该是var scolor = 'black';

我还委托点击而不是内联 href:javascript

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 = black;

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);

.canvas {
  border: 1px solid #000;
  cursor: crosshair;
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

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

.navbar span {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
}

.color-selector-circle {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
}

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

<div class="navbar">
  <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>

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

HTML5 Canvas 笔划有黑点

HTML5 Canvas Stroke has black dots

html

css

html5-canvas