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

2019-08-23 23:34:34 阅读：295 来源： 互联网

标签：html javascript angular css canvas

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

标签：html,javascript,angular,css,canvas
来源： https://codeday.me/bug/20190823/1702192.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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