09绘制文字

作者: 夜幕小草 | 来源:发表于2016-12-07 23:15 被阅读20次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="padding: 100px;">
  <canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>

<script>
     // 1. 获取标签
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // 2. 绘制文字
    ctx.font = "100px '微软雅黑'";
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'red';
    ctx.strokeText('HeLiang', 200, 200);
    ctx.fillStyle = 'purple';
    ctx.fillText('HeLiang', 200, 200);

    ctx.beginPath();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    // 设置阴影的颜色
    ctx.shadowColor = 'orange';
     // 设置模糊的范围
    ctx.shadowBlur =  15;
    ctx.shadowOffsetX = -10; // 水平偏移量
    ctx.shadowOffsetY = 10;  // 垂直偏移量

    ctx.strokeText('html5', 200, 400);
    ctx.fillText('html5', 200, 400);
</script>
</body>
</html>