javascript – 从CSS属性设置Canvas strokeStyle颜色？

在我们的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());
        },

我最初的想法是将一个CSS类分配给canvas标签并设置color属性.然后我将从self.canvas.nativeElement中检索color属性的值.但是,当我使用Chrome Web Inspector工具检查self.canvas.nativeElement时,没有可用的CSS样式.

解决方法:

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

任何应该像strokeStyle do take a CSS color一样：

A DOMString parsed as CSS value.

请注意,颜色可以返回您可能想要单独处理的透明值.

例

下面是一个如何根据类名检索颜色值的示例.该元素被插入到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);  // @R_404_3889@ 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>