11-canvas绘制折线图
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>11-Canvas绘制折线图</title>
- 6 <style>
- 7 *{
- 8 margin: 0;
- 9 padding: 0;
- 10 }
- 11 canvas{
- 12 display: block;
- 13 margin: 0 auto;
- 14 background: red;
- 15 }
- 16 </style>
- 17 </head>
- 18 <body>
- 19 <canvas width="500" height="400"></canvas>
- 20 <script>
- 21 // 1.拿到canvas
- 22 let oCanvas = document.querySelector("canvas");
- 23 // 2.从canvas中拿到绘图工具
- 24 let oCtx = oCanvas.getContext("2d");
- 25 // 3.定义变量保存小方格的尺寸
- 26 let gridSize = 50;
- 27 // 4.拿到canvas的宽高
- 28 let canvasWidth = oCtx.canvas.width;
- 29 let canvasHeight = oCtx.canvas.height;
- 30 // 5.计算在垂直方向和水平方向可以绘制多少条横线
- 31 let row = Math.floor(canvasHeight / gridSize);
- 32 let col = Math.floor(canvasWidth / gridSize);
- 33 // 6.绘制垂直方向的横线
- 34 for(let i = 0; i < row; i++){
- 35 oCtx.beginPath();
- 36 oCtx.moveTo(0, i * gridSize - 0.5);
- 37 oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
- 38 oCtx.strokeStyle = "#ccc";
- 39 oCtx.stroke();
- 40 }
- 41 // 7.绘制水平方向的横线
- 42 for(let i = 0; i < col; i++){
- 43 oCtx.beginPath();
- 44 oCtx.moveTo(i * gridSize - 0.5, 0);
- 45 oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
- 46 oCtx.strokeStyle = "#ccc";
- 47 oCtx.stroke();
- 48 }
- 49
- 50 // 1.计算坐标系原点的位置
- 51 let originX = gridSize;
- 52 let originY = canvasHeight - gridSize;
- 53 // 2.计算X轴终点的位置
- 54 let endX = canvasWidth - gridSize;
- 55 // 3.绘制X轴
- 56 oCtx.beginPath();
- 57 oCtx.moveTo(originX, originY);
- 58 oCtx.lineTo(endX, originY);
- 59 oCtx.strokeStyle = "#000";
- 60 oCtx.stroke();
- 61 // 4.绘制X轴的箭头
- 62 oCtx.lineTo(endX - 10, originY + 5);
- 63 oCtx.lineTo(endX - 10, originY - 5);
- 64 oCtx.lineTo(endX, originY);
- 65 oCtx.fill();
- 66
- 67 // 5.计算Y轴终点的位置
- 68 let endY = gridSize;
- 69 // 3.绘制Y轴
- 70 oCtx.beginPath();
- 71 oCtx.moveTo(originX, originY);
- 72 oCtx.lineTo(originX, endY);
- 73 oCtx.strokeStyle = "#000";
- 74 oCtx.stroke();
- 75 // 4.绘制X轴的箭头
- 76 oCtx.lineTo(originX - 5, endY + 10);
- 77 oCtx.lineTo(originX + 5, endY + 10);
- 78 oCtx.lineTo(originX, endY);
- 79 oCtx.fill();
- 80
- 81 // 1.拿到服务器返回数据
- 82 let list = [
- 83 {
- 84 x: 100,
- 85 y: 300
- 86 },
- 87 {
- 88 x: 200,
- 89 y: 200
- 90 },
- 91 {
- 92 x: 300,
- 93 y: 250
- 94 },
- 95 {
- 96 x: 400,
- 97 y: 100
- 98 },
- 99 ];
- 100 let dotSize = 20;
- 101 // 2.绘制数据点
- 102 for(let i = 0; i < list.length; i++){
- 103 oCtx.beginPath();
- 104 oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2);
- 105 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2);
- 106 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2);
- 107 oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2);
- 108 oCtx.closePath();
- 109 oCtx.fill();
- 110 }
- 111
- 112 // 1.绘制折线
- 113 oCtx.beginPath();
- 114 for(let i = 0; i < list.length; i++){
- 115 if(i === 0){
- 116 oCtx.moveTo(list[i].x, list[i].y);
- 117 }else{
- 118 oCtx.lineTo(list[i].x, list[i].y);
- 119 }
- 120 }
- 121 oCtx.strokeStyle = "blue";
- 122 oCtx.stroke();
- 123 </script>
- 124 </body>
- 125 </html>
11-canvas绘制折线图的更多相关文章
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- canvas绘制折线图
效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...
- canvas绘制折线图(仿echarts)
遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...
- 【带着canvas去流浪】（2）绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【Canvas】(2)---绘制折线图
绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...
- php中用GD绘制折线图
php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...
随机推荐
- .NET 个人博客-添加RSS订阅功能
个人博客-添加RSS订阅功能 前言 个人博客系列已经完成了 留言板 文章归档 推荐文章优化 推荐文章排序 博客地址:https://pljzy.top 然后博客开源的原作者也是百忙之中添加了一个名为R ...
- hive第一课：Hive3.1.2概述与基本操作
Hive3.1.2概述与基本操作 1.Hive基本概念 1.1 Hive简介 Hive本质是将SQL转换为MapReduce的任务进行运算,底层由HDFS来提供数据存储,说白了hive可以理解为一个将 ...
- FFmpeg开发笔记（三十四）Linux环境给FFmpeg集成libsrt和librist
<FFmpeg开发实战:从零基础到短视频上线>一书的"10.2 FFmpeg推流和拉流"提到直播行业存在RTSP和RTMP两种常见的流媒体协议.除此以外,还有比较两 ...
- Xilinx XCZU7EV评估板规格书（四核ARM Cortex-A53 + 双核ARM Cortex-R5 + FPGA，主频1.5GHz）
1 评估板简介 创龙科技TLZU-EVM是一款基于Xilinx UltraScale+ MPSoC系列XCZU7EV高性能处理器设计的高端异构多核SoC评估板,处理器集成PS端(四核ARM Corte ...
- python rsa加密
rsa简单加密: 1 import rsa 2 import base64 3 4 rsa_key_pair = rsa.newkeys(2048) # 生成密钥对,返回(PublicKey(n,e) ...
- 工控CTF_MMS
工控CTF_MMS 参考文章 https://blog.csdn.net/song123sh/article/details/127358610 概况 MMS工控协议是基于MMS和TCP等的基础上,开 ...
- Nginx常用操作
Nginx Nginx的最重要的几个使用场景 静态资源服务,通过本地文件提供服务 反向代理服务,延伸出包括缓存,负载均衡等 API服务,OpenResty 相关概念 简单请求和非简单请求 请求方法是H ...
- mac idea 配置Tomcat
官网下载Tomcat 下载地址:点我直达 配置Idea 设置Application Servers 操作步骤:Intellij IDEA->Preferences->Application ...
- C#开发一个可被带参数调用并返回数据的控制台应用程序
1 标准输出流控制台程序: namespace ReturnConsoleWrite { class Program { static void Main(string[] args) { //程序功 ...
- Windows 10 LTSC启用Microsoft Store的方法
新建msreg.bat文件,并编辑内容如下: ========== @echo off :: BatchGotAdmin :------------------------------------- ...