canvas-文字

2024-04-27 15:08:10

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-文字</title>    <style>        #canvas{            border: 1px solid palevioletred;        }    </style>    <script>      window.onload = function (){          //獲取到canvas元素          var canvas = document.getElementById('canvas');          //獲取canvas中的畫圖環(huán)境          var context = canvas.getContext('2d');         //設(shè)置字體的大小格式          context.font="50px 黑體";          //描邊字體          //顯示文字 .strokeText('文字內(nèi)容',顯示位置X坐標(biāo),顯示位置Y坐標(biāo),顯示文字所占的寬度（可省：不做限制）);          context.strokeText('何問起',50,50);          //填充字體 .fillText('文字內(nèi)容',顯示位置X坐標(biāo),顯示位置Y坐標(biāo),顯示文字所占的寬度（可省：不做限制）);          context.fillText("何問起",300,50,50);          //即填充又描邊 字體          //設(shè)置描邊屬性          context.strokeStyle = 'green';          //設(shè)置描邊線條的寬度          context.lineWidth = 5;          context.strokeText('何問起',150,480);          //設(shè)置填充屬性          context.fillStyle = 'orange';          context.fillText("何問起",150,480);          //設(shè)置文字在該坐標(biāo)點(diǎn)，怎么居中/如何對(duì)齊          //設(shè)置坐標(biāo)參考點(diǎn)          context.fillRect(250,250,10,10);          //設(shè)置水平居中 主要屬性：left,right,center          context.textAlign = 'center';          //設(shè)置上下居中 主要屬性：top,bottom,middle          context.textBaseline = 'middle';          context.lineWidth = 1;          context.font='100px 楷體';          context.strokeText('梅',250,250);      }    </script></head><body>    <canvas id="canvas" width="500px" height="500px">    </canvas></body></html>

上一篇：canvas-圓形

下一篇：canvas-圓弧