HTML5 Canvas Stroke 有黑点

如何解决HTML5 Canvas Stroke 有黑点

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

我添加了更改笔划颜色的功能，但无论选择何种颜色，生成的笔划都会被间歇性黑点“打断”。如果以较慢的速度绘制笔画，则点会紧密地排列在一起以产生“蠕虫”效果，但如果以较快的速度绘制，则点会间隔开。

如果我只是点击一个（做一个点），颜色总是黑色。

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>

解决方法

你需要相同的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>