画点：canvas画折线图的小js

**

画点：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