从CSS属性设置Canvas strokeStyle颜色？

Question

在我们的Angular2/Ionic 2项目中,我们有一个可以绘制的HTML Canvas元素.如何使用CSS样式提供的颜色设置Canvas strokeStyle属性？

下面是绘制函数的片段.是否可以将context.strokeStyle属性设置为从CSS检索的值？

draw = function () {
            context.clearRect(0, 0, self.canvas.nativeElement.width, self.canvas.nativeElement.height);
            context.strokeStyle = "#000";
            context.lineJoin = "round";
            context.lineWidth = 5;
            for (var i = 0; i < clickX.length; i++) {
                context.beginPath();
                if (clickDrag[i] && i) {
                    context.moveTo(clickX[i - 1], clickY[i - 1]);
                } else {
                    context.moveTo(clickX[i] - 1, clickY[i]);
                }
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.stroke();
            }
            self.canvasEmpty.emit(self.isCanvasEmpty());
        },

我最初的想法是canvas使用color属性集为标记分配一个CSS类.然后我会color从中检索属性的值self.canvas.nativeElement.但是,当我self.canvas.nativeElement使用Chrome Web Inspector工具进行检查时,没有可用的CSS样式.

Answer 1

通常,您可以将样式或类附加到临时插入DOM的元素,然后使用getComputedStyle()该color属性来获取可stokeStyle在2D上下文中使用的字符串.

任何应该strokeStyle 采取CSS颜色:

DOMString解析为CSS值.

请注意,color可以返回transparent您可能要单独处理的值.

例

下面是一个如何根据类名检索颜色值的示例.该元素被插入到DOM中,因为某些浏览器需要它才能计算CSS属性值.

更改CSS类中的颜色以更改画布中绘制的弧的颜色.

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

function colorFromCSSClass(className) {
  var tmp = document.createElement("div"), color;
  tmp.style.cssText = "position:fixed;left:-100px;top:-100px;width:1px;height:1px";
  tmp.className = className;
  document.body.appendChild(tmp);  // required in some browsers
  color = getComputedStyle(tmp).getPropertyValue("color");
  document.body.removeChild(tmp);
  return color
}

// alter color in style-sheet to alter stroke color
ctx.strokeStyle = colorFromCSSClass("myStyle");
ctx.lineWidth = 5;
ctx.arc(150, 75, 70, 0, 6.28);
ctx.stroke();

/* Alter color here to alter stroke color in canvas */
.myStyle {
  color:#09f;
  }

<canvas></canvas>