canvas内的字体实现阴影效果

api介绍

可以通过几种全局context属性来控制阴影。
shadowColor任何CSS中的颜色值。可以使用透明度(alpha)
ShadowOffsetX像素值。值为正数,向右移动阴影;值为负数,向左移动阴影
shadowOffsetY像素值。值为正数,向下移动阴影;值为负数,向上移动阴影
shadowBlur高斯模糊值。值越大,阴影边缘越模糊

案例代码

canvas内的字体实现阴影效果_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus?">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>练习title>
    <style>
        #myCanvas {
            background-color:#00ffff
        }
    style>
head>
<body>
<canvas id="myCanvas" width="1072" height="200">您的浏览器不支持canvas!canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    // 设置文字阴影的颜色为黑色,透明度为20%
    context.shadowColor = 'rgba(0, 0, 0, 0.2)';
    // 将阴影向右移动15px,向上移动10px
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    // 轻微模糊阴影
    context.shadowBlur = 2;
    // 字号为60px,字体为impact
    context.font = "100px 楷体";
    // 将文本填充为棕色
    context.fillStyle = '#ffffff';
    // 将文本设为居中对齐
    context.textAlign = 'center';
    context.textBaseline='middle';
    // 在canvas顶部中央的位置,以大字体的形式显示文本
    context.fillText('现在学习也不晚', 536, 100);
    context.restore();
script>
body>
script>
html>

你可能感兴趣的:(html5)