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>【效果图】
进阶版没工夫去实现了。忽然邻近上班，来我的项目了。靠各位大佬去实现了。