标签：canvas floor js var 折线图 y0 x0 dotSize Math

**

画点：canvas画折线图的小js

效果：就像这种点

**
找了一下，画点的代码：
一位大哥的

// 1. 设置坐标点的中心圆点位置（x0，y0）
            var x0 = 100;
            var y0 = 200;
 // 2. 获取Canvas的width、height
            var CanvasWidth = ctx.canvas.width;
            var CanvasHeight = ctx.canvas.height;
 // 3.设置坐标点的大小  dotSize
            var dotSize = 10;
 // 4.计算坐标点的上下左右四角的点坐标: 左上(x1,y1) 左下(x2,y2) 右上(x3,y3) 右下(x4,y4)
 
            var x1 = Math.floor(x0 - dotSize/2);
            var y1 = Math.floor(y0 - dotSize/2);
 
            var x2 = Math.floor(x0 - dotSize/2);
            var y2 = Math.floor(y0 + dotSize/2);
 
            var x3 = Math.floor(x0 + dotSize/2);
            var y3 = Math.floor(y0 - dotSize/2);
 
            var x4 = Math.floor(x0 + dotSize/2);
            var y4 = Math.floor(y0 + dotSize/2);
 // 5.绘画坐标点
            ctx.beginPath();
            ctx.moveTo(x1,y1); // 左上点
            ctx.lineTo(x2,y2); // 左下点
            ctx.lineTo(x4,y4); // 右下点
            ctx.lineTo(x3,y3); // 右上点
            ctx.closePath();
 // 6.填充以及描边y轴
            ctx.fill();

为了方便使用，给它弄成了一个js文件fill.js

function drawPoints(ctxobj,data) {				
                /*														使用方法，导入这个js文件
																		定义好要画的点的数据集合
																		直接传进创建好的2d对象和数据即可画*/
                var dotSize = 10;
                // 4.遍历点的坐标,以及绘画点
                data.forEach(function (item,i) {
                    //console.log("i = " + i + ", x = " + item.x + ", y = " + item.y);
                    // 1. 设置坐标点的中心圆点位置（x0，y0）
                    var x0 = item.x;
                    var y0 = item.y;
                    // 2.计算坐标点的上下左右四角的点坐标: 左上(x1,y1) 左下(x2,y2) 右上(x3,y3) 右下(x4,y4)
 					var x1 = Math.floor(x0 - dotSize/2);
                    var y1 = Math.floor(y0 - dotSize/2);
 
                    var x2 = Math.floor(x0 - dotSize/2);
                    var y2 = Math.floor(y0 + dotSize/2);
 
                    var x3 = Math.floor(x0 + dotSize/2);
                    var y3 = Math.floor(y0 - dotSize/2);
 
                    var x4 = Math.floor(x0 + dotSize/2);
                    var y4 = Math.floor(y0 + dotSize/2);
 
                    // 3.绘画坐标点
                    ctxobj.beginPath();
                    ctxobj.moveTo(x1,y1); // 左上点
                    ctxobj.lineTo(x2,y2); // 左下点
                    ctxobj.lineTo(x4,y4); // 右下点
                    ctxobj.lineTo(x3,y3); // 右上点
                    ctxobj.closePath();
 
                    // 4.填充以及描边y轴
                    ctxobj.fill();
                });
 
            }

调用

<script type="text/javascript" src="fill.js"></script>

创建2d对象
定义要画的点集

var points = [
                {
                    x: 20,
                    y: 80,
                }
              ]

最后调用就行
drawPoints(ctxobj,points)

标签：canvas,floor,js,var,折线图,y0,x0,dotSize,Math
来源： https://blog.csdn.net/m0_50027019/article/details/121033729

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