在我们的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());
},
Run Code Online (Sandbox Code Playgroud)
我最初的想法是canvas使用color属性集为标记分配一个CSS类.然后我会color从中检索属性的值self.canvas.nativeElement.但是,当我self.canvas.nativeElement使用Chrome Web Inspector工具进行检查时,没有可用的CSS样式.