本文详细介绍Canvas API中直线路径方法如beginPath(), moveTo(), lineTo(), stroke()的应用，及如何利用这些方法绘制动态梯子图案。同时，深入探讨fillText()方法用于画布上的文本绘制，包括动画效果实现。
目录
直线路径 API 方法
beginPath() 方法
beginPath() 方法开始一条路径，或重置当前的路径。
提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
提示：请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法：context.beginPath()；
w3c 参考例子：http://www.w3school.com.cn/tags/canvas_beginpath.asp
注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。
moveTo() 方法
moveTo() 方法把路径移动到画布中的指定点，不创建线条。
提示：请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法：context.moveTo(x,y);
| 参数 | 描述 |
|---|---|
| x | 路径的目标位置的 x 坐标。 |
| y | 路径的目标位置的 y 坐标。 |
w3c 参考例子：http://www.w3school.com.cn/tags/canvas_moveto.asp
lineTo() 方法
lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
提示：请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法：context.lineTo(x,y);
| 参数 | 描述 |
|---|---|
| x | 路径的目标位置的 x 坐标。 |
| y | 路径的目标位置的 y 坐标。 |
菜鸟教程：http://www.runoob.com/tags/canvas-lineto.html
stroke() 方法
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。
JavaScript 语法：context.stroke();
菜鸟教程：http://www.runoob.com/tags/canvas-stroke.html
绘制路径编码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style type="text/css">
#myCanvas {
border-left: 1px solid #9A9990;
border-right: 1px solid #9A9990;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
/**以下设置为全局变量
* speed：速度，单位像素
* singleWidth：单次运动线长，与画布等长
* singleHeight：单次运动线高
* lineNum：绘制的横线数目
* time：帧动画请求id，用于停止动画
*/
let speed = 3;
let singleWidth = 300, singleHeight = 40;
let lineNum;
let time = 0;
/**
* 极速梯子动画
* @param canvas ：画布
* @param ctx ：画布上下文
* @param currentWidth ：动画终端当前 x 坐标
* @param currentHeight ：动画终端当前 y 坐标
* @param flag ：0 表示向下，-1 表示向左，1 表示向右
* @param index : 向下移动的次数，从 1 开始
*/
let show = function (canvas, ctx, currentWidth, currentHeight, flag, index) {
switch (flag) {
/** 向左移动*/
case -1:
if (currentWidth > 0) {
currentWidth -= speed;
} else {
flag = 0;
}
break;
/**向下移动*/
case 0:
if (currentHeight < index * singleHeight) {
currentHeight += speed;
} else {
/**如果当前绘制了3条横线，且一共只要绘制3条时，则继续往下绘制一根*/
if (index == 4 && lineNum == 3) {
flag = 0;
} else {
flag = currentWidth <= 0 ? 1 : -1;
}
index++;
}
/**如果运动到底部距离5像素，则停止动画*/
if (currentHeight >= canvas.height - 5) {
return;
}
break;
/**向右移动*/
case 1:
if (currentWidth < singleWidth) {
currentWidth += speed;
} else {
flag = 0;
}
break;
}
/**添加一个新点，然后在画布中创建从该点到最后指定点的线条（该方法并不会创建线条）
* 最后绘制已定义的路径*/
ctx.lineTo(currentWidth, currentHeight);
ctx.stroke();
/**开启帧动画回调*/
time = requestAnimationFrame(function () {
show(canvas, ctx, currentWidth, currentHeight, flag, index);
});
};
$(function () {
/**
* 获取画布以及画布上下文对象
* @type {Element}
*/
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
/**"运行"按钮点击事件*/
$("button").click(function () {
/**先停止原来的帧动画*/
window.cancelAnimationFrame(time);
/**情况画布内的所有旧像素点*/
ctx.clearRect(0, 0, canvas.width, canvas.height);
/**beginPath：开始一条路径，或重置当前的路径*/
ctx.beginPath();
/**
* lineWidth：设置或返回当前线条的宽度，以像素计。
* lineCap：属性设置或返回线条末端线帽的样式。round 表示圆角
*/
ctx.lineWidth = 10;
ctx.lineCap = "round";
/**获取用户参数值*/
var start = $("input[name='start']:checked").val();
lineNum = $("input[name='lineNum']:checked").val();
/**初始化起点 x 坐标*/
var initX = start == 1 ? 0 : 300;
/**把路径移动到画布中的指定点，不创建线条，设置起点*/
ctx.moveTo(initX, 0);
/**调用方法实现动画*/
show(canvas, ctx, initX, 0, 0, 1);
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
起点：<label><input type="radio" name="start" value="1" checked>左</label><label><input type="radio" name="start"
value="2">右</label><br>
线数：<label><input type="radio" name="lineNum" value="3" checked>3</label><label><input type="radio" name="lineNum"
value="4">4</label><br><br>
<button type="button">运行</button>
</body>
</html>canvas fillText() 方法绘制文本
fillText() 方法在画布上绘制填色的文本，文本默认颜色是黑色。
提示：使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法：context.fillText(text,x,y,maxWidth);
| 参数 | 描述 |
|---|---|
| text | 规定在画布上输出的文本。 |
| x | 开始绘制文本的 x 坐标位置（相对于画布）。 |
| y | 开始绘制文本的 y 坐标位置（相对于画布）。 |
| maxWidth | 可选。允许的最大文本宽度，以像素计。 |
Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Canvas 文本</title>
<style type="text/css">
.canvasDiv {
width: 490px;
height: 150px;
background-color: #999999;
display: inline-block;
margin-left: 20px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="module">
/**
* 绘制文本
*/
let fillText1 = function () {
/**
* 获取画布,同时为画布设置宽高等于父容器的宽高
* 获取父容器尺寸这里用的是 JQuery 的方法获取，它获取的值是不带单位的
* @type {Element}
*/
let canvas = document.getElementById("myCanvas1");
canvas.width = $(canvas).parent().width();
canvas.height = $(canvas).parent().height();
/**获取画布上下文环境*/
let ctx = canvas.getContext("2d");
/**
* fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
* font：设置或返回画布上文本内容的当前字体属性，如下所示 字号 字体
* @type {CanvasGradient}
*/
ctx.font = "30px Verdana";
ctx.fillStyle = "#fff";
/**
* 相对画布开始绘制文本的 X 坐标为 0，即从最左侧开始
* 相对画布开始绘制文本的 Y 坐标为画布高度的一般，即从中间开始
* 最后如果绘制的文本过长，又想它全部显示出来，则设置允许的最大文本宽度，以像素计
* 默认如果没有限制，则超过的文本内容，不会显示出来
*/
ctx.fillText("2018 the Great Wall(万里长城)", 0, canvas.height / 2, canvas.width);
/**下面没有添加内容最大长度限制时，当文本长度超过画布宽度时，超过的部分不会再显示*/
/*ctx.fillText("2018 the Great Wall(万里长城)", 0, canvas.height / 2);*/
}
/**
* 绘制文本----动画版
* 只需要将一段文本，每次绘制的长度多一点就可以达到动画的效果
* canvas、ctx 不需要每次都重复获取，所以作为参数传入即可
* text：每次绘制的文本
*/
let fillText2 = function (canvas, ctx, text) {
/** 这里通过为画布设置尺寸，则画布每次会先清除掉原来的像素，重新进行绘制*/
canvas.width = $(canvas).parent().width();
canvas.height = $(canvas).parent().height();
/**
* fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
* font：设置或返回画布上文本内容的当前字体属性，如下所示 字号 字体
* @type {CanvasGradient}
*/
ctx.font = "30px Verdana";
ctx.fillStyle = "#fff";
/**
* 相对画布开始绘制文本的 X 坐标为 0，即从最左侧开始
* 相对画布开始绘制文本的 Y 坐标为画布高度的一般，即从中间开始
* 最后如果绘制的文本过长，又想它全部显示出来，则设置允许的最大文本宽度，以像素计,这里就是画布的宽度
* 默认如果没有限制，则超过的文本内容，不会显示出来
*/
ctx.fillText(text, 0, canvas.height / 2, canvas.width);
}
$(function () {
fillText1();
/**
* 获取画布,同时为画布设置宽高等于父容器的宽高
* 获取父容器尺寸这里用的是 JQuery 的方法获取，它获取的值是不带单位的
* @type {Element}
*/
let canvas = document.getElementById("myCanvas2");
/**获取画布上下文环境*/
let ctx = canvas.getContext("2d");
let text = "2018 the Great Wall(万里长城)";
let index = 1;
/**
* 使用定时器，每隔 50 毫秒就绘制一次文本
* 每次绘制的文本都多一个字符
*/
setInterval(function () {
if (index <= text.length) {
fillText2(canvas, ctx, text.substring(0, index++));
} else {
index = 1;
}
}, 50);
});
</script>
</head>
<body>
<div class="canvasDiv">
<canvas id="myCanvas1">浏览器不支持 Canvas</canvas>
</div>
<div class="canvasDiv">
<canvas id="myCanvas2">浏览器不支持 Canvas</canvas>
</div>
</body>
</html>
扫一扫
2599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
