首页 > 代码库 > canvas学习绘制文字

canvas学习绘制文字

2024-09-04 10:28:49   219人阅读

1.文字的绘制方法

strokeText("文字",x,y,maxWith)  绘制（描边）空心文字

fillText("文字",x,y,maxWith) 绘制实心

字体样式 font(大小 字体 ...)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas{background:#A9A9A0;}
    </style>
</head>
<body>
    <canvas id="bcanvas" width="800" height="800">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById(‘bcanvas‘);
        var pi=canvas.getContext(‘2d‘);
        pi.lineWidth=2;
        pi.strokeStyle="yellow";
        pi.fillStyle="orange";
        pi.moveTo(400,500);
        pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();
        pi.beginPath();
        pi.strokeStyle="orange";
        pi.fillStyle="#A9A9A0";
        pi.moveTo(400,500);
        pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();
        pi.beginPath();
        pi.lineWidth=1;
        pi.strokeStyle="green";
        pi.fillStyle="red";
        pi.font="60px 隶书";
        pi.strokeText("纵",375,270);
        pi.fillText("横",375,340);
        pi.strokeText("横",375,340);
        pi.font="60px 仿宋"
        pi.strokeText("横",375,410);
    </script>
</body>
</html>

 

canvas学习绘制文字


联系
我们