关于javascript:二哥canvas-基础入门四

【今日学习目录】

canvas 中怎么应用图片
canvas 中怎么应用暗影
canvas 中绘制文本信息

【今日实现指标】

通过这么多天的分享，canvas 的根底应该还是把握了一些，明天就来实现一个根底班的折线图，进阶版：尝试一下用数据驱动，动态创建这个折线图。

在 canvas 中应用图片，须要用到 JavaScript 中原生提供的 Image 的构造函数来生成一个图片对象，因为 canvas 提供的图片办法承受两个参数。第一个参数就是一个图片的对象或者是一个另外的 canvas 对象，第一个参数是决定以后图片是否反复平铺，跟 css 中的 background-repeat 一样的参数：repeat、repeat-x、repeat-y、no-repeat。通过 createPattern 办法来创立图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 根底入门 (四)</title>
    <style>
        #canvasBox{
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500" id="canvasBox"> 您浏览器暂不反对 canvas 标签的渲染，请抉择 谷歌浏览器或者火狐浏览器关上浏览~ </canvas>
    <script type="text/javascript"> 
        // 获取到 canvas 盒子
        let canvas = document.getElementById("canvasBox");

        // 获取 canvas 的上下文对象
        let ctx = canvas.getContext("2d");

        // 判断以后浏览器是否反对
        if (ctx) {
            // 生成图片对象
            let img = new Image();
            // 加载图片门路
            img.src = "./1.jpg";
            // 监听图片加载胜利
            img.onload = () => {
                // 创立 canvas 图片对象
                let ctxImg = ctx.createPattern(img, 'repeat');
                // 赋值给款式
                ctx.fillStyle = ctxImg;
                // 创立矩形
                ctx.fillRect(10, 10, 300, 300);
            }
        } else {console.log("您以后浏览器不反对 canvas");
        }
    </script>
</body>
</html>

【效果图】

能够看到 createPattern 的第二个参数为 repeat 的时候，是会 x、y 轴都会平铺。对应批改第二个参数，会有不同的平铺成果。

【repeat-x】

【repeat-y】

【no-repeat】

在很多网站中都能够看到暗影的成果，文字暗影，盒子暗影。应用的还是比拟多的。在 canvas 中也反对暗影的绘制。

canvas 提供了四个属性来设置暗影成果，shadowOffsetX 设置暗影在 x 轴延申的地位，shadowOffsetY 设置暗影在 y 轴延申的地位，shadowBlur 设置暗影的含糊水平。两个属性的默认值是 0，shadowColor 是设置暗影的色彩，与 CSS 的色彩统一标准，默认是全透明的彩色。

通过一个小例子来感受一下 canvas 的暗影成果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 根底入门 (四)</title>
    <style>
        #canvasBox{
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500" id="canvasBox"> 您浏览器暂不反对 canvas 标签的渲染，请抉择 谷歌浏览器或者火狐浏览器关上浏览~ </canvas>
    <script type="text/javascript"> 
        // 获取到 canvas 盒子
        let canvas = document.getElementById("canvasBox");

        // 获取 canvas 的上下文对象
        let ctx = canvas.getContext("2d");

        // 判断以后浏览器是否反对
        if (ctx) {
            // 设置 暗影 延申地位
            ctx.shadowOffsetX = 10;
            ctx.shadowOffsetY = 10;
            // 设置含糊水平
            ctx.shadowBlur = 10;
            // 设置暗影色彩
            ctx.shadowColor = "rgba(255,0,255, 0.5)";
            // 设置盒子的色彩
            ctx.fillStyle = "#f0f";
            // 绘制矩形
            ctx.fillRect(100, 100, 100, 100);

        } else {console.log("您以后浏览器不反对 canvas");
        }
    </script>
</body>
</html>

【效果图】

在 canvas 中应用暗影还是比拟不便的，四个属性就能够把暗影成果展示进去。刚是设置的正向的暗影，设置地位的时候，值是能够为正数的，给盒子的上方以及右方增加暗影。

// 设置 暗影 延申地位
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = -10;

【效果图】

仔细的小伙伴应该能够发现一个问题，就是，canvas 如同没有提供一个同时左右都有暗影的属性，那怎么能力让盒子周围都有暗影呢。

因为 canvas 没有像 html 中 css 款式提供的 shadow 哪有有五个参数，设置扩散范畴。那么只能看到一个简略的周围暗影成果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 根底入门 (四)</title>
    <style>
        #canvasBox{
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500" id="canvasBox"> 您浏览器暂不反对 canvas 标签的渲染，请抉择 谷歌浏览器或者火狐浏览器关上浏览~ </canvas>
    <script type="text/javascript"> 
        // 获取到 canvas 盒子
        let canvas = document.getElementById("canvasBox");

        // 获取 canvas 的上下文对象
        let ctx = canvas.getContext("2d");

        // 判断以后浏览器是否反对
        if (ctx) {
            // 设置 暗影 延申地位
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            // 设置含糊水平
            ctx.shadowBlur = 20;
            // 设置暗影色彩
            ctx.shadowColor = "rgba(255,0,255, 1)";
            // 设置盒子的色彩
            ctx.fillStyle = "#f0f";
            // 绘制矩形
            ctx.fillRect(100, 100, 100, 100);

        } else {console.log("您以后浏览器不反对 canvas");
        }
    </script>
</body>
</html>

【效果图】

之前咱们学了怎么画一条线，怎么画一个圆，画一个有弧度的形态，设置款式，应用图片，应用暗影。始终还没波及到如果设置一个文字，canvas 常见的应用场景，图表插件，分享海报，以及其余的一些图片合成的算法和小游戏的开发。文字必定是必不可少的。

canvas 提供了两个绘制文本的办法。fillText(text, x, y [, maxWidth] ), strokeText(text, x, y[, maxWidth] ), 两个办法参数是一样的。第一个参数是须要绘制的文本信息，x,y 确定文本开始绘制的地位。最初一个参数是可选的，是绘制文本最大的宽度。如果文字超出了。会对文字进行缩放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 根底入门 (四)</title>
    <style>
        #canvasBox{
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500" id="canvasBox"> 您浏览器暂不反对 canvas 标签的渲染，请抉择 谷歌浏览器或者火狐浏览器关上浏览~ </canvas>
    <script type="text/javascript"> 
        // 获取到 canvas 盒子
        let canvas = document.getElementById("canvasBox");

        // 获取 canvas 的上下文对象
        let ctx = canvas.getContext("2d");

        // 判断以后浏览器是否反对
        if (ctx) {
            // 设置文本大小
            ctx.font = "40px serif";
            // 绘制填充文本
            ctx.fillText("hello word", 100, 100);
            // 绘制空心文本
            ctx.strokeText("hello word", 100, 200);

        } else {console.log("您以后浏览器不反对 canvas");
        }
    </script>
</body>
</html>

【效果图】

刚刚下面的例子中，我用到了一个 font 属性，对文字大小进行了批改。canvas 提供了四个属性设置文本的款式。font 跟 css 中的 fon 属性是一样的。textAlign 设置文本对齐形式：start、end、left、right、或者 center，默认值是 start。textBaseline 设置基线对齐形式：top, hanging, middle, alphabetic, ideographic, bottom, 默认值是 alphabetic。direction 设置文本的方向：lrt，rtl，inherit

x 轴刻度线
底部 x 轴划分 y 轴工夫线的数据
折线图地位

首先须要咱们实现一个简略版的折线图。最高是 300，x 轴每个刻度相隔 50 高度。y 轴间隔分成七份，简略剖析后，咱们须要绘画的有三大部分，线段，文字，圆点。那么咱们对实现三个办法。绘制不同内容。

【绘制线段】

// 绘制线段的办法 开始点 xy，完结点 xy，色彩值 默认是彩色
let line = (startX, startY, endX, endY, color = "#000") => {
    // 设置色彩
    ctx.strokeStyle = color;
    // 生成门路
    ctx.beginPath();
    // 设置笔触
    ctx.moveTo(startX,startY);
    // 第一笔
    ctx.lineTo(endX, endY);
    // 敞开门路
    ctx.closePath();
    ctx.stroke();}

【绘制文字】

// 绘制文字 文本，绘制开始坐标，字体大小
let text = (text, x, y, fontSize = 16) => {
    // 设置文字大小
    ctx.font = fontSize + 'px serif';
    // 绘制文本
    ctx.fillText(text, x, y);
}

【绘制圆】

 // 绘制圆 中心点地位，半径
 let round = (x, y, r) => {
     // 生成门路
     ctx.beginPath();
     // 绘制圆
     ctx.arc(x, y, r, 0, Math.PI / 180 * 360, false);
     ctx.stroke();}

辅助函数都曾经筹备好了。咱们现来绘制折线图的 x 轴和 y 轴。首先确定一下分割线的间隔。x 轴的线，须要从总高度 / 刻度线 = 分割线间隔。写着写着忽然发现，这个计算规定有问题。稍微难堪，数学真是硬伤呀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 根底入门 (四)</title>
    <style>
        #canvasBox{
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500" id="canvasBox"> 您浏览器暂不反对 canvas 标签的渲染，请抉择 谷歌浏览器或者火狐浏览器关上浏览~ </canvas>
    <script type="text/javascript"> 
        // 获取到 canvas 盒子
        let canvas = document.getElementById("canvasBox");

        // 获取 canvas 的上下文对象
        let ctx = canvas.getContext("2d");

        // 判断以后浏览器是否反对
        if (ctx) {
          
            // 绘制线段的办法 开始点 xy，完结点 xy，色彩值 默认是彩色
            let line = (startX, startY, endX, endY, color = "#000") => {
                // 设置色彩
                ctx.strokeStyle = color;
                // 生成门路
                ctx.beginPath();
                // 设置笔触
                ctx.moveTo(startX,startY);
                // 第一笔
                ctx.lineTo(endX, endY);
                // 敞开门路
                // ctx.closePath();
                ctx.stroke();}

            // 绘制文字 文本，绘制开始坐标，字体大小
            let text = (text, x, y, fontSize = 16) => {
                // 设置文字大小
                ctx.font = fontSize + 'px serif';
                // 绘制文本
                ctx.fillText(text, x, y);
            }

            // 绘制圆 中心点地位，半径
            let round = (x, y, r) => {
                // 生成门路
                ctx.beginPath();
                // 绘制圆
                ctx.arc(x, y, r, 0, Math.PI / 180 * 360, false);
                ctx.stroke();}

            // 绘制办法
            let polyline = () => {
                // 定义盒子总高度, 宽度, 咱们定义 canvas 高度是 500，这里咱们取 400
                let H = 400,
                    W = 400;
                // 获取到 x 轴之间间隔
                let X = parseInt(400 / 7);
                // 获取 Y 轴之间间隔
                let Y = parseInt(400 / 8);
                
                // 绘制折线的数据
                let lineData = [50, 130, 150, 88, 250, 33, 300];
                // 工夫线的数据
                let timeData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

                // 绘制 x 轴的线
                [7,6,5,4,3,2,1].forEach((item, index) => {
                    // 画线
                    line(50,50 + X * index, W, 50 + X * index, item === 1 ? "#000" : "#ccc");
                    console.log(50 + X * index)
                    // 标注刻度值
                    text((item - 1) * 50, 20,56 + X * index);
                })

                // 画工夫分割线
                for (let i = 0, len = timeData.length + 1; i < len; i++) {
                    // 画线
                    line(50 + Y * i,X * 6 + 50, 50 + Y * i, X * 6 + 50 + 10);
                    if (len - 1 > i) {
                        // 标注刻度工夫
                        text(timeData[i], 65 + Y * i, X * 6 + 65, 13);
                    }
                }

                // 绘制折线图
                lineData.forEach((item, index) => {if ( index === 0) {ctx.moveTo(50 + Y   * (index + 1), 400 - item  - 14 );
                        ctx.lineTo(50 +  Y  * (index + 1), 400 - item  - 14 );
                    } else {ctx.lineTo(50 +  Y  * (index + 1), 400 - item - 14 );
                    }
                    ctx.stroke();})

            }
            polyline();} else {console.log("您以后浏览器不反对 canvas");
        }
    </script>
</body>
</html>

【效果图】

进阶版没工夫去实现了。忽然邻近上班，来我的项目了。靠各位大佬去实现了。

关于javascript:二哥canvas-基础入门四

canvas 根底入门 (四)

1、应用图片

2、应用暗影

3、绘制文本

4、实现一个简略的折线图

【剖析】

Just My Socks（注册教程内含优惠码）

关于javascript:二哥canvas-基础入门四

canvas 根底入门 (四)

1、应用图片

2、应用暗影

3、绘制文本

4、实现一个简略的折线图

【剖析】

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）