小编Gre*_*egg的帖子

从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());
        },
Run Code Online (Sandbox Code Playgroud)

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

html javascript css canvas angular

3
推荐指数
1
解决办法
1019
查看次数

标签 统计

angular ×1

canvas ×1

css ×1

html ×1

javascript ×1