使用canvas根据坐标集合绘制坐标点 + 更改坐标轴 + 旋转y轴

效果

场景

根据坐标点使用canvas在画布上展示出来

html

 <canvas ref="canvasImg" class="canvasImg" style="margin-top: 20px">浏览器版本过低，请去下载最新版本浏览器
</canvas>

data数据

coordinates: [{x: 100, y: 50, }, { x: 100, y: -50, },  {x: -50,  y: 50,   },  {   x: -50,y: -50, },    ],

绘制

created() {this.$nextTick(() => {this.canvas = this.$refs.canvasImg;this.ctx = this.canvas.getContext("2d");this.canvas.width = 880;this.canvas.height = 460;//设置canvas中心点this.ctx.translate(0.5 * this.canvas.width, 0.5 * this.canvas.height);// 原先y轴是向下的，现在改为向上this.ctx.scale(1, -1);});
},
mounted() {this.getPoints();
},
created:{getPoints() {this.coordinates.forEach((item) => {this.loadPoint(item, "#FF5562FF");});},
}
//画点方法
loadPoint(point, color) {this.$nextTick(() => {this.ctx.save();this.ctx.beginPath();this.ctx.arc(point.x, point.y, 2, 0, 2 * Math.PI, false); //更改点大小this.ctx.fillStyle = color;this.ctx.fill();this.ctx.restore();});
},

摘抄好文

canvas一开始的坐标系是这样的。

有时候为了方便可以，将起始点放在canvas中间，然后将y轴的方向改为向上：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 原来坐标系的起点在canvas的左上角（0, 0)，现在将起点定在(128, 128)这个点上
ctx.translate(128, 128);
// 原先y轴是向下的，现在改为向上
ctx.scale(1, -1);

摘抄部分来源于：
https://blog.csdn.net/qq_34086980/article/details/110288051

使用canvas根据坐标集合绘制坐标点 + 更改坐标轴 + 旋转y轴相关推荐

R语言rms包生存分析之限制性立方样条(RCS, Restricted cubic spline)分析:拟合连续性自变量和事件风险之间的关系并绘制直方图、平滑曲线、双Y轴于同一个图像中
R语言rms包生存分析之限制性立方样条(RCS, Restricted cubic spline)分析:拟合连续性自变量和事件风险之间的关系并绘制直方图.平滑曲线.双Y轴于同一个图像中目录
QCharts绘制柱状图，柱高和y轴数据刻度不匹配
QCharts绘制柱状图,柱高和y轴数据不匹配使用QCharts之前,需要确保自己在安装Qt组件时,选中了Charts这一组件如果需要使用QCharts绘制柱状图,需进行以下设置 //在项目pro ...
html5 --- canvas绘制网格并画x、y轴
效果如下: // 代码如下: <body><canvas width="500" height="375" id="c"& ...
matlab 坐标轴居中,MATLAB 把坐标轴(X Y轴)移到坐标原点
某位PKU前辈的工作,很赞.移动坐标轴就先隐藏之前的坐标轴,再用axis('position')属性重新生成新轴,很巧妙. function new_fig_handle = shift_axis_t ...
MATLAB 把坐标轴(X Y轴)移到坐标原点
点击打开链接原文某位PKU前辈的工作,很赞.移动坐标轴就先隐藏之前的坐标轴,再用axis('position')属性重新生成新轴,很巧妙. function new_fig_handle = sh ...
python绘图时如何添加图例_【Python】matplotlib 双y轴绘制及合并图例
1.双y轴绘制关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...
canvas根据坐标点绘制图形
有一需求,需要根据后台返回的坐标集在canvas中绘制图形.由于canvas使用不多,简单记录学习一下.整个需求实现主要分为三个部分一.前端等比展示a4纸大小canvas画布 1. A4纸大小:21 ...
canvas绘制坐标点连线/动态改变宽度导致canvas渲染失败
文章目录一.有关canvas 二.绘制图案三.放大缩小功能四.canvas清空画布的三种方式五.动态改变宽度导致canvas渲染失败现在需要根据坐标点绘制对应的连线,于是考虑采用canvas ...
html坐标绘制路径,canvas学习笔记之绘制简单路径
1 线段(直线路径) 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画 ...

使用canvas根据坐标集合绘制坐标点 + 更改坐标轴 + 旋转y轴

效果

场景

html

data数据

绘制

摘抄好文

使用canvas根据坐标集合绘制坐标点 + 更改坐标轴 + 旋转y轴相关推荐

最新文章

热门文章