/
demo3.html
41 lines (37 loc) · 1.22 KB
/
demo3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas教程-moveTo()组合图形</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #555;display: block;margin:50px auto;"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
//画一个组合图形
//假设有个笔尖移动到 (100,100)这个位置
context.moveTo(100, 100);
context.lineTo(300, 300);
context.lineTo(100, 500);
//假设有个笔尖移动到 (200,100)这个位置
context.moveTo(200, 100);
context.lineTo(400, 300);
context.lineTo(200, 500);
//假设有个笔尖移动到 (300,100)这个位置
context.moveTo(300, 100);
context.lineTo(500, 300);
context.lineTo(300, 500);
//进行线条粗细设置
context.lineWidth = 5;
//进行线条样式设置
context.strokeStyle = "#058";
//绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
context.stroke();
}
</script>
</body>
</html>