html5 canvas 画一个矩形，在矩形里添加文字。文字颜色与矩形背景颜色问题？？

tcpfeng 2012-09-24 12:05:16

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

	

	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();

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

...全文

1512 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2012-09-24

打赏
举报

fillStyle strokeStyle 可以采用不同的颜色
例子

<!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>