码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-22 20:37:12      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:this   --   call   cal   ext   function   nload   jscript   设置   

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> 

 

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

标签:this   --   call   cal   ext   function   nload   jscript   设置   

原文地址:https://www.cnblogs.com/zhangyezi/p/13362527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!