有没有办法在HTML5画布上使用CSS颜色？

Question

目前我使用如下的javascript代码：

var gradient = ctx.createLinearGradient(0, 0, 30, 0);
gradient.addColorStop(0.00, 'green');
gradient.addColorStop(0.01, 'white');
gradient.addColorStop(1.00, 'white');
...
ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
...
ctx.fillStyle = 'rgba(0, 128, 0, ' + alpha + ')';
ctx.fillStyle = 'rgba(255, 255, 255, ' + alpha + ')';

有没有办法将这些定义移到CSS？

Answer 1

间接地，是的......

您可以使用以下方式获取应用于页面上任何元素的CSS样式：

var elementStyle=window.getComputedStyle(anyElement, null);

然后您可以使用以下方法查询该元素的文本颜色：

var elementColor=elementStyle.getPropertyCSSValue('color');

以下是示例代码和演示：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var sourceElement=document.getElementById("source");
var color=window.getComputedStyle(sourceElement,null).getPropertyValue("color");
var bk=window.getComputedStyle(sourceElement,null).getPropertyValue("background-color");

ctx.fillStyle=bk;
ctx.fillRect(0,0,cw,ch);

ctx.font='36px times';
ctx.fillStyle=color;
ctx.fillText('from #source',30,100);

＆＃13;

body{ background-color:white; padding:10px; }
#canvas{border:1px solid red;}
#source{color:maroon;background-color:ivory;
  width:100px;height:75px;border:1px solid blue;padding:10px;}

＆＃13;

<div id=source>I'm #source</div>
<canvas id="canvas" width=350 height=200></canvas>

＆＃13;

＆＃13;

＆＃13;