canvas

2019-07-27 16:55:06 阅读：233 来源： 互联网

标签：canvas lineTo space ctx arrowSize let

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #canvas{
 8             border: 1px solid #ccc;
 9             display: block;
10             margin: 0 auto;
11         }
12     </style>
13 </head>
14 <body>
15     <canvas id="canvas" width="600" height="400"></canvas>
16 <script>
17     // 1. 获取画布
18     let canvas = document.querySelector('#canvas');
19     // 2. 获取上下文 绘制的工具箱
20     let ctx = canvas.getContext('2d');
21     // 3. 移动画笔
22     ctx.moveTo(100, 100);
23     // 4. 绘制直线
24     ctx.lineTo(300, 100);
25     // 5. 描边
26     ctx.stroke();
27 </script>
28 </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #canvas {
 8             border: 1px solid #ccc;
 9             display: block;
10             margin: 0 auto;
11         }
12     </style>
13 </head>
14 <body>
15 <canvas id="canvas" width="600" height="400"></canvas>
16 <script>
17     // 1. 获取画布
18     let canvas = document.querySelector('#canvas');
19 
20     // 2. 获取上下文 绘制的工具箱
21     let ctx = canvas.getContext('2d');
22 
23     // 3.变量
24     let space = 20, arrowSize = 10;
25     let cWidth = ctx.canvas.width;
26     let cHeight = ctx.canvas.height;
27     // console.log(cWidth, cHeight);
28     // 起始点
29     let x0 = space, y0 = cHeight - space;
30 
31     // 4. 绘制x轴
32     ctx.beginPath();
33     ctx.moveTo(x0, y0);
34     ctx.lineTo(cWidth - space, y0);
35     // 箭头
36     ctx.lineTo(cWidth - space - arrowSize, y0 + arrowSize / 2);
37     ctx.lineTo(cWidth - space - arrowSize, y0 - arrowSize / 2);
38     ctx.lineTo(cWidth - space, y0);  //三个点
39     // 填充
40     ctx.fill();
41     // 描边
42     ctx.stroke();
43 
44     // 5. 绘制y轴
45     ctx.beginPath();
46     ctx.moveTo(x0, y0);
47     ctx.lineTo(space, space);
48     // 箭头
49     ctx.lineTo(space + arrowSize / 2, space + arrowSize);
50     ctx.lineTo(space - arrowSize / 2, space + arrowSize);
51     ctx.lineTo(space, space);
52     // 填充
53     ctx.fill();
54     ctx.stroke();
55 </script>
56 </body>
57 </html>

标签：canvas,lineTo,space,ctx,arrowSize,let
来源： https://www.cnblogs.com/zhangzhengyang/p/11255724.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas