创建渐变/彩虹strokeStyle html5 canvas

我很开心玩弄HTML5画布。到目前为止，我有这个很酷的绘图应用程序，我希望笔画风格是不同颜色的渐变。我会怎么做呢？这是我到目前为止。 http://jsfiddle.net/claireC/4kt38/创建渐变/彩虹strokeStyle html5 canvas

var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'); 

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

//puts a circle where the user clicks the mouse 

var radius = 10, 
dragging = false; 

context.lineWidth = radius*2; 

var putPoint = function(e){ 
if(dragging){ 
    context.lineTo(e.clientX, e.clientY); 
    context.stroke(); 
    context.beginPath(); 
    context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2); 
    context.fill(); 
    context.beginPath(); 
    context.moveTo(e.clientX, e.clientY); 
    } 
}; 

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

来源

2014-07-10 user2856111

尝试添加context.fillStyle = grad;后：

var grad= context.createLinearGradient(50, 50, 150, 150); 
grad.addColorStop(0, "red"); 
grad.addColorStop(1, "green"); 
context.fillStyle = grad;

来源

2014-07-10 21:47:59 zucker

我试过较早，但笔画出来像小半圆代替。这是更新的小提琴http://jsfiddle.net/claireC/4kt38/4/ – user2856111

我不是这个快速的努力真的很开心，但这里的彩虹渐变行程的初始尝试。

此代码只是抓住拖动鼠标的位置和笔划。

对此代码的改进将简化路径而不是抓取每个鼠标移动。

它通过绘制大量垂直于所需路径的线性渐变线来工作。这使得人们认为它会看到一个渐变中风。

示例代码和演示：http://jsfiddle.net/m1erickson/36F4T/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

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

    var PI=Math.PI; 
    var points=[]; 
    var isDown=false; 
    var linewidth=15; 
    var steps=50; 
    var lastPointX,lastPointY; 

    ctx.lineWidth=linewidth; 

    function addPoint(x,y){ 
     var dx=x-lastPointX; 
     var dy=y-lastPointY; 
     var angle=Math.atan2(dy,dx)-PI/2; 

     ctx.strokeStyle=calcGradient(x,y,angle); 

     ctx.beginPath(); 
     ctx.moveTo(lastPointX,lastPointY); 
     for(var i=-8;i<steps;i++){ 
      var xx=lastPointX+dx*i/(steps-1); 
      var yy=lastPointY+dy*i/(steps-1); 
      ctx.lineTo(xx,yy); 
     } 
     ctx.stroke(); 

     lastPointX=x; 
     lastPointY=y; 
    } 

    function calcGradient(x,y,angle){ 
     // calc the topside and bottomside points of the tangent line 
     var offX1=x+linewidth/2.25*Math.cos(angle); 
     var offY1=y+linewidth/2.25*Math.sin(angle); 
     var offX2=x+linewidth/2.25*Math.cos(angle-PI); 
     var offY2=y+linewidth/2.25*Math.sin(angle-PI); 
     // create a gradient stretching between 
     // the calculated top & bottom points 
     var gradient=ctx.createLinearGradient(offX1,offY1,offX2,offY2); 
     gradient.addColorStop(0.00, 'red'); 
     gradient.addColorStop(1/6, 'orange'); 
     gradient.addColorStop(2/6, 'yellow'); 
     gradient.addColorStop(3/6, 'green') 
     gradient.addColorStop(4/6, 'aqua'); 
     gradient.addColorStop(5/6, 'blue'); 
     gradient.addColorStop(1.00, 'purple'); 
     return(gradient); 
    } 

    function handleMouseDown(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 

     lastPointX=parseInt(e.clientX-offsetX); 
     lastPointY=parseInt(e.clientY-offsetY); 

     isDown=true; 
    } 

    function handleMouseUp(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     isDown=false; 
    } 

    function handleMouseMove(e){ 
     if(!isDown){return;} 
     e.preventDefault(); 
     e.stopPropagation(); 

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

     addPoint(mouseX,mouseY); 

    } 

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

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2014-07-11 04:22:53 markE

创建渐变/彩虹strokeStyle html5 canvas

回答

相关问题