canvas--如何做一组炫酷的文本

最新推荐文章于 2024-01-07 00:03:58 发布

Yannnnnm

最新推荐文章于 2024-01-07 00:03:58 发布

阅读量405

点赞数

分类专栏：小白文章标签： canvas

本文链接：https://blog.csdn.net/Yannnnnm/article/details/108917636

版权

小白专栏收录该内容

10 篇文章 0 订阅

订阅专栏

要想做一组炫酷的文本，首先我们要知道如何在canvas画布上书写文本，其次我们要学会阴影和渐变的基本用法，这里由于是文字所以以线性渐变为例

使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
canvas 阴影重要属性

shadowColor 属性设置或返回用于阴影的颜色。
shadowBlur 属性设置或返回阴影的模糊级数。
shadowOffsetX 属性设置或返回形状与阴影的水平距离，shadowOffsetX大于0表示阴影位于右侧，反之位于左侧。
shadowOffsetY 属性设置或返回形状与阴影的垂直距离。大于0表示阴影位于下面，反之位于上部
3.Canvas - 渐变（这里主要使用线性渐变）
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

基本的知识都在这里，那么现在来实施：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <canvas width="800" height="500"></canvas>
    <script>
        var oCanvas=document.querySelector('canvas');
        if(oCanvas.getContext){
            var ctx=oCanvas.getContext('2d');
            // 加上渐变
            //水平渐变
            var lingrad=ctx.createLinearGradient(100,200,500,200);
            //加上颜色
            lingrad.addColorStop(0.5,'#cc6677');
            lingrad.addColorStop(1,'#000')
            // 加阴影
            ctx.shadowColor='#113195';
            ctx.shadowBlur=10;//模糊度
            ctx.shadowOffsetX=10;//水平方向偏移量，大于零往左，
            ctx.shadowOffsetY=10;//垂直方向偏移量，大于零往下
            ctx.font='bold  italic  160px  Arial'
            // font-weight font-style(正常 倾斜 斜线) font-size font-family
           ctx.fillStyle=lingrad;
            ctx.fillText('Hello',100,200)
        }
    </script>
</body>
</html>