Различные стили кисти.HTML / JS - PullRequest
Новая
       7

Различные стили кисти.HTML / JS

1 голос
/ 20 сентября 2019

У меня есть холст HTML, на котором вы можете рисовать.Каким-то образом я хотел бы иметь возможность нажать кнопку, чтобы изменить стиль мазка.Используя этот скрипт ниже.Могу ли я добавить эту функцию, поэтому, когда я нажимаю кнопку с идентификатором «Pixelbrush».Это изменит мой ход кисти, чтобы нарисовать так: 

function drawPixels(x, y) {
for (var i = -10; i < 10; i+= 4) {
for (var j = -10; j < 10; j+= 4) {
  if (Math.random() > 0.5) {
    ctx.fillStyle = ['red', 'orange', 'yellow', 'green', 
                     'light-blue', 'blue', 'purple'][getRandomInt(0,6)];
    ctx.fillRect(x+i, y+j, 4, 4);
   }
  }
 }
}

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;

el.onmousedown = function(e) {
isDrawing = true;
lastPoint = { x: e.clientX, y: e.clientY };
};
el.onmousemove = function(e) {
if (!isDrawing) return;
  
drawPixels(e.clientX, e.clientY);
  
lastPoint = { x: e.clientX, y: e.clientY };
};
el.onmouseup = function() {
isDrawing = false;
};
canvas { border: 1px solid #ccc }
<canvas id="c" width="500" height="300"></canvas>

Вот мой оригинальный HTML-холст, к которому я хотел бы добавить эту функцию рисования. 

var canvas;

$(function () {
canvas = window._canvas = new fabric.Canvas('canvas');
canvas.backgroundColor = '#ffffff';
canvas.isDrawingMode= 1;
canvas.freeDrawingBrush.color = 'green';
canvas.freeDrawingBrush.width = 1;
canvas.renderAll();

document.getElementById('colorpicker').addEventListener('click', function (e) {
    console.log(e.target.value);
    canvas.freeDrawingBrush.color = e.target.value;
});
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<canvas id="canvas" width="1000" height="1000" class="canvas"></canvas>

<div id= "colorpicker">
<button id="yellow" value="#FFFF00">Yellow</button>
<button id="black" value="#000000">Black</button>
<button id="Pixelbrush" value="pixelbrush">PixelBrush</button>
<button id="Pencilbrush" value="pencilbrush">Pencil</button>
</div>
...