canvas 根底入门(四)
【今日学习目录】
- canvas中怎么应用图片
- canvas中怎么应用暗影
- canvas中绘制文本信息
【今日实现指标】
通过这么多天的分享，canvas的根底应该还是把握了一些，明天就来实现一个根底班的折线图，进阶版：尝试一下用数据驱动，动态创建这个折线图。
1、应用图片
在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】
2、应用暗影
在很多网站中都能够看到暗影的成果，文字暗影，盒子暗影。应用的还是比拟多的。在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>【效果图】
3、绘制文本
之前咱们学了怎么画一条线，怎么画一个圆，画一个有弧度的形态，设置款式，应用图片，应用暗影。始终还没波及到如果设置一个文字，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
4、实现一个简略的折线图
【剖析】
- 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>【效果图】
进阶版没工夫去实现了。忽然邻近上班，来我的项目了。靠各位大佬去实现了。