当前位置: 代码迷 >> HTML/CSS >> html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色有关问题?
  详细解决方案

html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色有关问题?

热度:2439   发布时间:2012-10-14 14:55:07.0
html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色问题??
html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色问题。
JScript code
    
    var c=this.callout[0];
    var cxt=c.getContext("2d");
        cxt.beginPath();
    cxt.moveTo(x0,y0);
    cxt.lineTo(x1,y1);
    cxt.lineTo(x2,y2);
    cxt.lineTo(x3,y3);
    cxt.lineTo(x4,y4);
    cxt.closePath();
    cxt.fillStyle="#000000";    
        cxt.fillText("hello world", x,y);
        cxt.fill();
    cxt.stroke();       


这样子只有背景色而文字颜色显示不了??
怎样设置矩形背景色和文字颜色???


------解决方案--------------------
fillStyle strokeStyle 可以采用不同的颜色
例子
HTML code
<!DOCTYPE html>
<html>
<head>
    <title>Canvas beginePath example</title>
    <script>
        function beginDemo() {
            var canvas = document.getElementById("demo")
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.lineWidth = "3";
            ctx.strokeStyle = "blue";
            ctx.fillStyle = "orange";
            ctx.moveTo(100, 100);
            ctx.lineTo(100, 400);
            ctx.lineTo(400, 400);
            ctx.lineTo(400, 100);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            ctx.font = "32pt Arial";
            ctx.strokeText("我是中文字", 120, 200);
            ctx.strokeStyle = "red";
            ctx.stroke();
        }
    </script>
</head>
<body onload="beginDemo();">
    <canvas id="demo" width="800" height="800"></canvas>
</body>
</html>