如何将样式设置为 html5 画布？答案

【问题标题】：How to set styles to html5 canvas?如何将样式设置为 html5 画布？
【发布时间】：2013-12-09 14:43:58
【问题描述】：

我使用以下代码将样式设置为“画布”。但我无法将"fillStyle" 设置为画布。但是strokeStyle 和lineWidth 工作正常。

Init(){
     var can = byId('myCanvas');

        // get it's context
        hdc = can.getContext('2d');

        hdc.strokeStyle = 'red';
        hdc.lineWidth = 2;

        // Fill the path
        hdc.fillStyle = "#9ea7b8";
        hdc.fill();
}

//并用坐标调用drawPoly函数。

function drawPoly(coOrdStr) {
        var canvas = byId('myCanvas');
        hdc.clearRect(0, 0, canvas.width, canvas.height);

        var mCoords = coOrdStr.split(',');
        var i, n;
        n = mCoords.length;
        hdc.beginPath();
        hdc.moveTo(mCoords[0], mCoords[1]);
        for (i = 2; i < n; i += 2) {
            hdc.lineTo(mCoords[i], mCoords[i + 1]);
        }
        hdc.lineTo(mCoords[0], mCoords[1]);
        hdc.stroke();

    }

有人可以帮忙吗？

【问题讨论】：

我多次更改了 fillStyle 颜色。但没有变化。
您需要指定要填充的内容...一个矩形、一个圆形...您关闭了笔触路径？
你还没有画任何东西。
我已经删除了所有提到 jQuery 的内容，因为这个问题与它无关。没有可用于画布的 jQuery 方法。

标签： javascript html canvas excanvas

【解决方案1】：

您没有使用任何形状进行填充。您需要添加它。我猜您正在尝试填充整个画布。那么这对你有用。试试这个：

 var can=document.getElementById("myCanvas");
 var hdc=can.getContext("2d");
 hdc.strokeStyle = 'red';
 hdc.lineWidth = 2;
 hdc.fillStyle="#FF0000";
 hdc.fillRect(0,0,can.width,can.height);

Working Fiddle

【讨论】：

@user2990596：如果你能创建相同的小提琴，那就太好了。