캔트가 작동하도록 캔버스를 잡습니다.

다음 코드를 사용하여 html5 캔버스로 그리기는하지만 storkeStyle은 작동하지 않습니다. 콘솔에서 this.color가 변경되었지만 그 색이 같은 색으로 그려 지도록 유지되는 것을 볼 수 있습니다. (마우스가 움직일 때 업데이트 중입니다).캔트가 작동하도록 캔버스를 잡습니다.

ctx.lineWidth = pixelRatio * this.lineThickness; 
    ctx.strokeStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.color[3] + ")"; 
    ctx.beginPath() 
    //ctx.beginPath(); 
    //Horizontal 
    ctx.moveTo(pos[0] * pixelRatio, 0); 
    ctx.lineTo(pos[0] * pixelRatio, (pos[1] - squareSize2) * pixelRatio); 
    ctx.moveTo(pos[0] * pixelRatio, (pos[1] + squareSize2) * pixelRatio); 
    ctx.lineTo(pos[0] * pixelRatio, frameState.size[1] * pixelRatio); 


    //Vertical 
    ctx.moveTo(0, pos[1] * pixelRatio); 
    ctx.lineTo((pos[0] - squareSize2) * pixelRatio, pos[1] * pixelRatio); 
    ctx.moveTo((pos[0] + squareSize2) * pixelRatio, pos[1] * pixelRatio); 
    ctx.lineTo(frameState.size[0] * pixelRatio, pos[1] * pixelRatio); 


    ctx.rect((pos[0] - squareSize) * pixelRatio, (pos[1] - squareSize) * pixelRatio, squareSize2 * pixelRatio, squareSize2 * pixelRatio); 


    ctx.moveTo((pos[0] - squareSize4) * pixelRatio, pos[1] * pixelRatio); 
    ctx.lineTo((pos[0] + squareSize4) * pixelRatio, pos[1] * pixelRatio); 


    ctx.moveTo(pos[0] * pixelRatio, (pos[1] - squareSize4) * pixelRatio); 
    ctx.lineTo(pos[0] * pixelRatio, (pos[1] + squareSize4) * pixelRatio); 

    console.log("rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.color[3] + ")"); 

    ctx.stroke();

출처

2014-09-14 Poul K. Sørensen

당신의'ctx.strokeStyle'은 잘 작동합니다 (this.colors가 0-255의 값이라고 가정합니다) : http://jsfiddle.net/m1erickson/zLr5ajey/ – markE

처음에는 작동하지만 루프에서 업데이트되면 recoloring. (응용 프로그램은 openlayers3에 있기 때문에 모든 것을 두드리기가 어려웠습니다) –

그러면 위에 제시된 코드 외부의 코드로 문제가 발생했습니다. ;-) – markE

-1

문제점은 내가 색상에 부동 소수점 값을 갖고 있으며 값에 소수점이없는 경우에만 작동한다는 것입니다.

출처

2014-09-14 21:39:35

캔트가 작동하도록 캔버스를 잡습니다.

답변

관련 문제