HTML5帆布画逼真的简单铅笔

时间：2015-02-18 08:45:36

标签： javascript html5 canvas html5-canvas brush

我如何创建逼真的简单铅笔工具，而不是像ms windows绘图程序。我需要这样的结果：enter image description here

如果我尝试没有透明的实体我会像在ms窗口绘制程序不是逼真的铅笔，如果我尝试添加不透明度我看到圈子这太不现实：enter image description here

如何在第一张照片中获得铅笔工具？我的尝试例子：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var previousMouseX = null;
var previousMouse = null;
var isDrawing = false;

var lineWidth = 10;
var brush = 1;
var myColor = "#FF0000";

function getMousePosition(canvas, evt) {
    
    var rect = canvas.getBoundingClientRect();
    
    if (evt.clientX !== undefined && evt.clientY !== undefined) {
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };   
    } 
}

/* BUTTONS */
$("#btn1").on("click", function() {
    ctx.globalAlpha = "0.2";
});

$("#btn2").on("click", function() {
    ctx.globalAlpha = "1";
});

$("#change-color").on("click", function() {
    ctx.strokeStyle = "#009933";
});

$("#canvas").on("mousedown", function(e) {
    isDrawing = true;
    var pos = getMousePosition(canvas, e);
    move(pos.x, pos.y);

});

$("#canvas").on("mousemove", function(e) {
    if(isDrawing) {
        var pos = getMousePosition(canvas, e);
        stroke(pos.x, pos.y);   
    }
});

$("#canvas").on("mouseup", function() {
    isDrawing = false;
});

function stroke(mouseX, mouseY) {
        ctx.globalCompositeOperation = "source-over";
        ctx.lineJoin = ctx.lineCap = "round";
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(previousMouseX, previousMouseY);
        ctx.lineTo(mouseX, mouseY);
        ctx.closePath();
        ctx.stroke();
        move(mouseX, mouseY);
}

function move(mouseX, mouseY) {
        previousMouseX = mouseX;
        previousMouseY = mouseY;
}
canvas  {
    border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btn1" value="Transparent">
<input type="button" id="btn2" value="Solid">
<input type="button" id="change-color" value="Green color"><br />
<canvas id="canvas" width="500" height="500">

2 个答案:

答案 0 :(得分：1)

这可以在你想要的地方附近吗？

使用透明的线宽10绘制铅笔，然后使用较小的线宽（8）在线条上绘制实体。也许你可以通过随机改变7,8和9之间的第二条线宽来获得更多的变化？

EDIT也可以在第1行和第0.8行之间随机设置第二行的不透明度！

在第一行永久设置不透明度，并将此代码添加到函数stroke（）

    ctx.globalAlpha = "1";
    ctx.lineWidth = 6;
    ctx.beginPath();
    ctx.moveTo(previousMouseX, previousMouseY);
    ctx.lineTo(mouseX, mouseY);
    ctx.closePath();
    ctx.stroke();

更改了代码段

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var previousMouseX = null;
var previousMouse = null;
var isDrawing = false;

var lineWidth = 10;
var brush = 1;
var myColor = "#FF0000";

function getMousePosition(canvas, evt) {
    
    var rect = canvas.getBoundingClientRect();
    
    if (evt.clientX !== undefined && evt.clientY !== undefined) {
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };   
    } 
}

/* BUTTONS */
$("#btn1").on("click", function() {
    ctx.globalAlpha = "0.2";
});

$("#btn2").on("click", function() {
    ctx.globalAlpha = "1";
});

$("#change-color").on("click", function() {
    ctx.strokeStyle = "#009933";
});

$("#canvas").on("mousedown", function(e) {
    isDrawing = true;
    var pos = getMousePosition(canvas, e);
    move(pos.x, pos.y);

});

$("#canvas").on("mousemove", function(e) {
    if(isDrawing) {
        var pos = getMousePosition(canvas, e);
        stroke(pos.x, pos.y);   
    }
});

$("#canvas").on("mouseup", function() {
    isDrawing = false;
});

function stroke(mouseX, mouseY) {
        ctx.globalCompositeOperation = "source-over";
        ctx.lineJoin = ctx.lineCap = "round";
        ctx.lineWidth = 10;
        ctx.globalAlpha = "0.2";  //NOTE ALWAYS SET TO 'TRANSPARENT' needs variable if you want to switch to solid.
        ctx.beginPath();
        ctx.moveTo(previousMouseX, previousMouseY);
        ctx.lineTo(mouseX, mouseY);
        ctx.closePath();
        ctx.stroke();

        ctx.globalAlpha = "1";
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(previousMouseX, previousMouseY);
        ctx.lineTo(mouseX, mouseY);
        ctx.closePath();
        ctx.stroke();

        move(mouseX, mouseY);
}

function move(mouseX, mouseY) {
        previousMouseX = mouseX;
        previousMouseY = mouseY;
}
canvas  {
    border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btn1" value="Transparent">
<input type="button" id="btn2" value="Solid">
<input type="button" id="change-color" value="Green color"><br />
<canvas id="canvas" width="500" height="500">

答案 1 :(得分：1)

enter image description here

这是铅笔效果。

它改编自Mohamed Moustafa所做的漂亮粉笔效果：http://codepen.io/mmoustafa/pen/gmEdk

示例代码和演示：

＆＃13;
＆＃13; 
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();

var isDown=false;
var startX,startY,mouseX,mouseY;


var xLast = 0;
var yLast = 0;
var brushDiameter=2;
var fill1='rgba(255,255,255,0.5)';

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/pad.jpg";
function start(){

  cw=canvas.width=img.width;
  ch=canvas.height=img.height;

  ctx.fillStyle = fill1;	
  ctx.strokeStyle = fill1;	
  ctx.lineWidth = brushDiameter;
  ctx.lineCap = 'round';

  ctx.drawImage(img,0,0);

  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
  $("#canvas").mouseup(function(e){handleMouseUp(e);});
  $("#canvas").mouseout(function(e){handleMouseOut(e);});

}

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  getOffset();
  xLast=mouseX=parseInt(e.clientX-offsetX);
  yLast=mouseY=parseInt(e.clientY-offsetY);

  isDown=true;

  draw(mouseX+1, mouseY+1);
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  isDown=false;
}

function handleMouseOut(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  isDown=false;
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  getOffset();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  draw(mouseX,mouseY);
}

//252,254,171        
function draw(x,y){
  ctx.strokeStyle = 'rgba(0,0,0,'+(0.4+Math.random()*0.2)+')';
  ctx.beginPath();
  ctx.moveTo(xLast, yLast);		
  ctx.lineTo(x, y);
  ctx.stroke();

  // Chalk Effect
  var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));
  var xUnit = (x-xLast)/length;
  var yUnit = (y-yLast)/length;
  for(var i=0; i<length; i++ ){
    var xCurrent = xLast+(i*xUnit);	
    var yCurrent = yLast+(i*yUnit);
    var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;			
    var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
    ctx.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);
  }
  xLast = x;
  yLast = y;	
}

function getOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;
}
＆＃13; 
body{ background-color:ivory; }
#canvas{border:1px solid red; background:white;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag to draw pencil line on the pad</h4>
<canvas id="canvas" width=300 height=300></canvas>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题