在我们的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); // 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>