如何在画布上遮蔽圆圈

Question

我正在与之HTML5合作canvas.我已经画了一个2D圆圈.现在我想用一个颜色遮住圆圈.但阴影看起来像一个3D圆圈.这可能用帆布吗？.谢谢你.

Answer 1

假烟雾和镜子

伪造球体上的光.我猜这是一个球体,就像你说圈子一样,你可能意味着一个甜甜圈.这种技术也适用于甜甜圈.

所以照明.

Phong Shading

最基本的照明模型是Phong(来自记忆).它使用入射光线和表面法线(从表面以90度出射的线)之间的角度.反射光的量是光强度的角度时间的余弦.

球体很容易

由于球体是对称的,这允许我们使用径向渐变来应用球体上每个像素的值,并且对于具有直接在头顶上的光的球体,这产生了非常小的努力的完美的phong阴影球体.

这样做的代码.x,y是球体的中心,r是半径.当你从球体的中心移出时,光和表面法线之间的角度很容易计算.它从零开始,以Math.PI/2(90deg)结束.所以反射值是该角度的余弦.

    var grd = ctx.createRadialGradient(x,y,0,x,y,r);
    var step = (Math.PI/2)/r;
    for(var i = 0; i < (Math.PI/2); i += step){
       var c = "" + Math.floor(Math.max(0,255 * Math.abs(Math.cos(i)));
       grd.addColorStop(i/(Math.PI/2),"rgba("+c+","+c+","+c+","1)");
    }

该代码创建一个适合圆圈的渐变.

适用于荷马食品的Mod

要为甜甜圈做,你需要修改我.圆环具有内半径和外半径(r1,r2),因此在for循环内修改i

 var ii = (i/(Math.PI/2)); // normalise i
 ii *= r2; // scale to outer edge
 ii = ((r1+r2)/2)-ii; // get distance from center line
 ii = ii / ((r2-r1)/2); // normalise to half the width;
 ii = ii * Math.PI * (1/2); // scale to get the surface norm on the donut.
 // use ii as the surface normal to calculate refelected light
 var c = "" + Math.floor(Math.max(0,255 * Math.abs(Math.cos(ii)));

Phong Shading很糟糕

通过phong阴影吸收很大的时间,不会做.这也不允许偏离中心或甚至部分位于球体后面的灯.

我们需要增加偏心中心光的能力.幸运的是,径向渐变可以抵消

  var grd = ctx.createRadialGradient(x,y,0,x,y,r);

前3个数字是渐变的起始圆,可以定位在任何位置.问题在于,当我们移动起始位置时,phong着色模型会崩溃.为了解决这个问题,有一点烟雾和镜子可以使眼睛相信大脑想要的东西.

我们根据光线距中心的距离,调整径向渐变上每个色标的下降,亮度,扩散和角度.

镜面高光

这有点改善但仍然不是最好的.照明的另一个重要组成部分是镜面反射(亮点).这取决于反射光和眼睛之间的角度.由于我们不想做所有这些(javascript很慢),我们将通过略微修改phong着色来修改它.我们简单地将表面法线乘以一个大于1的值.虽然不完美,但效果很好.

表面特性和环境

接下来的灯是彩色的,球体具有取决于频率的反射特性,并且还有环境光.我们不想对所有这些东西进行建模,因此我们需要一种方法来伪造它.

这可以通过合成来完成(用于几乎所有3D电影制作).我们一次建立一层照明.2D API为我们提供合成操作,因此我们可以创建多个渐变并对它们进行分层.

涉及到更多的数学,但我尽量保持简单.

一个演示

下面的演示实现了球体的实时着色(适用于所有径向对称的对象)除了画布和鼠标的一些设置代码之外,演示有两个部分,主循环通过分层进行合成,lights并且函数createGradient创建渐变.

使用的灯可以在对象中找到,lights并具有控制图层的各种属性.第一层应使用comp = source-in和/ lum = 1或最终将显示背景.所有其他层灯都可以满足您的需求.

标志spec告诉着色器光线是镜面的,必须包括specPower > 1我不审查它的存在.

光的颜色在阵列col中,代表红色,绿色和蓝色.这些值可以大于256且小于0,因为自然界中的光具有巨大的动态范围,并且某些效果需要您将入射光的方向提升到RGB像素的255极限之上.

我为分层结果添加了最后的"乘法".这是烟雾和镜子方法中的魔力.

如果您喜欢使用值和图层播放代码.移动鼠标以更改光源位置.

这不是真正的照明,它是假的,但只要它看起来不错,谁在乎.大声笑

UPDATE

发现一个错误,所以修复它,当我在这里时,更改代码,以便在单击鼠标左键时随机化灯光.这样您就可以看到ctx.globalCompositeOperation与渐变结合使用时可以实现的照明范围.

var demo = function(){
/** fullScreenCanvas.js begin **/
var canvas = (function(){
    var canvas = document.getElementById("canv");
    if(canvas !== null){
        document.body.removeChild(canvas);
    }
    // creates a blank image with 2d context
    canvas = document.createElement("canvas"); 
    canvas.id = "canv";    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight; 
    canvas.style.position = "absolute";
    canvas.style.top = "0px";
    canvas.style.left = "0px";
    canvas.style.zIndex = 1000;
    canvas.ctx = canvas.getContext("2d"); 
    document.body.appendChild(canvas);
    return canvas;
})();
var ctx = canvas.ctx;

/** fullScreenCanvas.js end **/


/** MouseFull.js begin **/
if(typeof mouse !== "undefined"){  // if the mouse exists 
    if( mouse.removeMouse !== undefined){
        mouse.removeMouse(); // remove prviouse events
    }
}else{
    var mouse;
}
var canvasMouseCallBack = undefined;  // if needed
mouse = (function(){
    var mouse = {
        x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false,
        interfaceId : 0, buttonLastRaw : 0,  buttonRaw : 0,
        over : false,  // mouse is over the element
        bm : [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits;
        getInterfaceId : function () { return this.interfaceId++; }, // For UI functions
        startMouse:undefined,
        mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
    };
    function mouseMove(e) {
        var t = e.type, m = mouse;
        m.x = e.offsetX; m.y = e.offsetY;
        if (m.x === undefined) { m.x = e.clientX; m.y = e.clientY; }
        m.alt = e.altKey;m.shift = e.shiftKey;m.ctrl = e.ctrlKey;
        if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1];
        } else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2];
        } else if (t === "mouseout") { m.buttonRaw = 0; m.over = false;
        } else if (t === "mouseover") { m.over = true;
        } else if (t === "mousewheel") { m.w = e.wheelDelta;
        } else if (t === "DOMMouseScroll") { m.w = -e.detail;}
        if (canvasMouseCallBack) { canvasMouseCallBack(mouse); }
        e.preventDefault();
    }
    function startMouse(element){
        if(element === undefined){
            element = document;
        }
        mouse.element = element;
        mouse.mouseEvents.forEach(
            function(n){
                element.addEventListener(n, mouseMove);
            }
        );
        element.addEventListener("contextmenu", function (e) {e.preventDefault();}, false);
    }
    mouse.removeMouse = function(){
        if(mouse.element !== undefined){
            mouse.mouseEvents.forEach(
                function(n){
                    mouse.element.removeEventListener(n, mouseMove);
                }
            );
            canvasMouseCallBack = undefined;
        }
    }
    mouse.mouseStart = startMouse;
    return mouse;
})();
if(typeof canvas !== "undefined"){
    mouse.mouseStart(canvas);
}else{
    mouse.mouseStart();
}
/** MouseFull.js end **/

// draws the circle
function drawCircle(c){
    ctx.beginPath();
    ctx.arc(c.x,c.y,c.r,0,Math.PI*2);
    ctx.fill();
}
function drawCircle1(c){
    ctx.beginPath();
    var x  = c.x;
    var y  = c.y;
    var r = c.r * 0.95;
    ctx.moveTo(x,y - r);
    ctx.quadraticCurveTo(x + r * 0.8, y - r         , x + r *1, y - r / 10);
    ctx.quadraticCurveTo(x + r      , y + r/3       , x     , y + r/3);
    ctx.quadraticCurveTo(x - r      , y + r/3       , x - r , y - r /10  );
    ctx.quadraticCurveTo(x - r * 0.8, y - r         , x     , y- r );
    ctx.fill();
}
function drawShadowShadow(circle,light){
    var x = light.x; // get the light position as we will modify it
    var y = light.y;
    var r = circle.r * 1.1;
    var vX = x - circle.x; // get the vector to the light source
    var vY = y - circle.y;
    var dist = -Math.sqrt(vX*vX+vY*vY)*0.3;
    var dir = Math.atan2(vY,vX);
    lx = Math.cos(dir) * dist + circle.x;   // light canb not go past radius
    ly = Math.sin(dir) * dist + circle.y;
    var grd = ctx.createRadialGradient(lx,ly,r * 1/4 ,lx,ly,r);
    grd.addColorStop(0,"rgba(0,0,0,1)");
    grd.addColorStop(1,"rgba(0,0,0,0)");
    ctx.fillStyle = grd;
    drawCircle({x:lx,y:ly,r:r})
}

// 2D light simulation. This is just an approximation and does not match real world stuff
// based on Phong shading.
// x,y,r descript the imagined sphere
// light is the light source 
// ambient is the ambient lighting
// amount is the amount of this layers effect has on the finnal result
function createGradient(circle,light,ambient,amount){
    var r,g,b;  // colour channels
    var x = circle.x; // get lazy coder values
    var y = circle.y;
    var r = circle.r;
    var lx = light.x; // get the light position as we will modify it
    var ly = light.y;
    var vX = light.x - x; // get the vector to the light source
    var vY = light.y - y;
    // get the distance to the light source
    var dist = Math.sqrt(vX*vX+vY*vY);
    // id the light is a specular source then move it to half its position away
    dist *= light.spec ? 0.5 : 1;   
    // get the direction of the light source.
    var dir = Math.atan2(vY,vX);
    
    // fix light position     
    lx = Math.cos(dir)*dist+x;   // light canb not go past radius
    ly = Math.sin(dir)*dist+y;
    // add some dimming so that the light does not wash out.
    dim = 1 - Math.min(1,(dist / (r*4)));
    // add a bit of pretend rotation on the z axis. This will bring in a little backlighting
    var lightRotate = (1-dim) * (Math.PI/2); 
    // spread the light a bit when near the edges. Reduce a bit for spec light
    var spread = Math.sin(lightRotate) * r * (light.spec ? 0.5 : 1);
    
    // create a gradient 
    var grd = ctx.createRadialGradient(lx,ly,spread,x,y,r + dist);
    // use the radius to workout what step will cover a pixel (approx)
    var step = (Math.PI/2)/r;
    // for each pixel going out on the radius add the caclualte light value
    for(var i = 0; i < (Math.PI/2); i += step){
        if(light.spec){
            // fake spec light reduces dim fall off
            // light reflected has sharper falloff
            // do not include back light via Math.abs
            r = Math.max(0,light.col[0] * Math.cos((i + lightRotate)*light.specPower) * 1-(dim * (1/3)) );
            g = Math.max(0,light.col[1] * Math.cos((i + lightRotate)*light.specPower) * 1-(dim * (1/3)) );
            b = Math.max(0,light.col[2] * Math.cos((i + lightRotate)*light.specPower) * 1-(dim * (1/3)) );
        }else{
            // light value is the source lum * the cos of the angle to the light
            // Using the abs value of the refelected light to give fake back light.
            // add a bit of rotation with (lightRotate) 
            // dim to stop washing out 
            // then clamp so does not go below zero
            r = Math.max(0,light.col[0] * Math.abs(Math.cos(i + lightRotate)) * dim );
            g = Math.max(0,light.col[1] * Math.abs(Math.cos(i + lightRotate)) * dim );
            b = Math.max(0,light.col[2] * Math.abs(Math.cos(i + lightRotate)) * dim );
        }
        // add ambient light
        if(light.useAmbient){
        r += ambient[0];
        g += ambient[1];
        b += ambient[2];
        }
        

        // add the colour stop with the amount of the effect we want.
        grd.addColorStop(i/(Math.PI/2),"rgba("+Math.floor(r)+","+Math.floor(g)+","+Math.floor(b)+","+amount+")");
    }
    //return the gradient;
    return grd;
}

// define the circles
var circles = [
    {
        x: canvas.width * (1/2),
        y: canvas.height * (1/2),
        r: canvas.width * (1/8),
    }
]
function R(val){
    return val * Math.random();
}
var lights;
function getLights(){
    return {
        ambient : [10,30,50],
        sources : [
            {
                x: 0,    // position of light 
                y: 0,
                col : [R(255),R(255),R(255)], // RGB intensities can be any value 
                lum : 1,             // total lumanance for this light
                comp : "source-over",  // composite opperation
                spec : false,  // if true then use a pretend specular falloff
                draw : drawCircle,
                useAmbient : true,
            },{  // this light is for a little accent and is at 180 degree from the light
                x: 0,
                y: 0,
                col : [R(255),R(255),R(255)],
                lum : R(1),
                comp : "lighter",
                spec : true,  // if true then you MUST inclue spec power
                specPower : R(3.2),
                draw : drawCircle,
                useAmbient : false,
            },{
                x: canvas.width,
                y: canvas.height,
                col : [R(1255),R(1255),R(1255)],
                lum : R(0.5),
                comp : "lighter",
                spec : false,
                draw : drawCircle,
                useAmbient : false,
    
            },{
                x: canvas.width/2,
                y: canvas.height/2 + canvas.width /4,
                col : [R(155),R(155),R(155)],
                lum : R(1),
                comp : "lighter",
                spec : true,  // if true then you MUST inclue spec power
                specPower : 2.32,
                draw : drawCircle,
                useAmbient : false,
            },{
                x: canvas.width/3,
                y: canvas.height/3,
                col : [R(1255),R(1255),R(1255)],
                lum : R(0.2),
                comp : "multiply",
                spec : false,
                draw : drawCircle,
                useAmbient : false,
            },{
                x: canvas.width/2,
                y: -100,
                col : [R(2255),R(2555),R(2255)],
                lum : R(0.3),
                comp : "lighter",
                spec : false,
                draw : drawCircle1,
                useAmbient : false,
            }
        ]
    }
}
lights = getLights();
/** FrameUpdate.js begin **/
var w = canvas.width;
var h = canvas.height;
var cw = w / 2;
var ch = h / 2;
ctx.font = "20px Arial";
ctx.textAlign = "center";
function update(){
    ctx.setTransform(1,0,0,1,0,0);
    ctx.fillStyle = "#A74"
    ctx.fillRect(0,0,w,h);
    ctx.fillStyle = "black";
    ctx.fillText("Left click to change lights", canvas.width / 2, 20)
    // set the moving light source to that of the mouse
    if(mouse.buttonRaw === 1){
        mouse.buttonRaw = 0;
        lights = getLights();
    }
    lights.sources[0].x = mouse.x;
    lights.sources[0].y = mouse.y;
    if(lights.sources.length > 1){
        lights.sources[1].x = mouse.x;
        lights.sources[1].y = mouse.y;
    }
    drawShadowShadow(circles[0],lights.sources[0])
    //do each sphere 
    for(var i = 0; i < circles.length; i ++){
        // for each sphere do the each light
        var cir = circles[i];
        for(var j = 0; j < lights.sources.length; j ++){
            var light = lights.sources[j];
            ctx.fillStyle = createGradient(cir,light,lights.ambient,light.lum);
            ctx.globalCompositeOperation = light.comp;
            light.draw(circles[i]);
        }
    }
    ctx.globalCompositeOperation = "source-over";    
    
    
    if(!STOP && (mouse.buttonRaw & 4)!== 4){
        requestAnimationFrame(update);
    }else{
        if(typeof log === "function" ){
            log("DONE!")
        }
        STOP = false;
        var can = document.getElementById("canv");
        if(can !== null){
            document.body.removeChild(can);
        }        
        
    }
}

if(typeof clearLog === "function" ){
    clearLog();
}
update();
}
var STOP = false;  // flag to tell demo app to stop 
function resizeEvent(){
var waitForStopped = function(){
    if(!STOP){  // wait for stop to return to false
        demo();
        return;
    }
    setTimeout(waitForStopped,200);
}
STOP = true;
setTimeout(waitForStopped,100);
}
window.addEventListener("resize",resizeEvent);
demo();
/** FrameUpdate.js end **/

Answer 2

正如@ danday74所说，您可以使用渐变为圆添加深度。

您还可以使用阴影添加圆的深度。

这是一个概念证明，说明了3d甜甜圈：

我留给你设计你想要的圈子

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

var PI=Math.PI;

drawShadow(150,150,120,50);


function drawShadow(cx,cy,r,strokewidth){
  ctx.save();
  ctx.strokeStyle='white';
  ctx.lineWidth=5;
  ctx.shadowColor='black';
  ctx.shadowBlur=15;
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r-5,0,PI*2);
  ctx.clip();
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r,0,PI*2);
  ctx.stroke();
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r-strokewidth,0,PI*2);
  ctx.stroke();
  ctx.shadowColor='rgba(0,0,0,0)';
  //
  ctx.beginPath();
  ctx.arc(cx,cy,r-strokewidth,0,PI*2);
  ctx.fillStyle='white'
  ctx.fill();
  //
  ctx.restore();
}

body{ background-color: white; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>