html5 canvas元素字型繪製
阿新 • • 發佈：2019-01-22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{background: #b8edc9;}
</style>
</head>
<body>
<h5>Canvas</h5>
<canvas id="mycanvas" width="1000" height="1000">
您的瀏覽器不支援html5dcanvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');//定義變數獲取畫布dom
var c=mycanvas.getContext('2d');//設定繪圖環境2d
//繪製文字
c.lineWidth=1;
c.strokeStyle="fuchsia";
c.fillStyle="blue";
c.font="40px 隸書"//設定字型格式font="大小 字型"
c.strokeText("帥",344,390);//設定空心字型
c.fillText("帥",344,450);//設定實心字型
c.strokeText("帥",50,520);//設定有邊的實心字型
c.fillText("帥",50,520);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{background: #b8edc9;}
</style>
</head>
<body>
<h5>Canvas</h5>
<canvas id="mycanvas" width="1000" height="1000">
您的瀏覽器不支援html5dcanvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');//定義變數獲取畫布dom
var c=mycanvas.getContext('2d');//設定繪圖環境2d
//繪製文字
c.lineWidth=1;
c.strokeStyle="fuchsia";
c.fillStyle="blue";
c.font="40px 隸書"//設定字型格式font="大小 字型"
c.strokeText("帥",344,390);//設定空心字型
c.fillText("帥",344,450);//設定實心字型
c.strokeText("帥",50,520);//設定有邊的實心字型
c.fillText("帥",50,520);
</script>
</body>
</html>