用html编写一幅简单的画,使用html5画简单的折线图
//得到画布
var can1=document.getElementByIdx_x_x_x("can");
//得到画笔
var cxt=can1.getContext("2d");
//定义图表的数据,该方式为创建数组直接量的方式
var sale_data=[80,92,104,110,68,50,45,90,74,98,103];
//首先为背景进行设置渐变的效果,表示的是从(0,0)到(600,0)即纵坐标上边显示渐变的效果
var g=cxt.createLinearGradient(0,100);
g.addColorStop(0,"#e0e0e0");
g.addColorStop(1,"#ffffff");
//将渐变效果添加在我们的画布上边
cxt.fillStyle=g;
//开始绘制效果
cxt.fillRect(0,can1.width,can1.height);
//设置要绘制方格的行数和列数
var cols=sale_data.length+1;
var rows=4;
//计算每一个小方格的宽度和高度
var cell_width=can1.width/cols;
var cell_height=can1.height/rows;
//设置绘制的颜色
cxt.strokeStyle="#a0a0a0";
//调用绘制表格的函数
drawTable(sale_data);
//绘制表格的函数
function drawTable(data){
cxt.beginPath();
//开始画竖线
for(var i=0;i<=rows;i++){
//计算绘制的坐标
var heiy=cell_height*i;
cxt.moveTo(0,heiy);
cxt.lineTo(can.width,heiy);
}
//绘制横线
for(var j=0;j<=cols;j++){
//计算绘制的坐标
var widx=cell_width*j;
cxt.moveTo(widx,0);
cxt.lineTo(widx,can1.height);
}
//绘制表格完成
cxt.stroke();
//获取数据当中的最大值,以便可以划分纵坐标轴,来进行绘图,即每个像素代表的数值是多少,纵坐标的最大值
var max_val=0;
for(var i=0;i
if(max_val
max_val=data[i];
}
}
//之后我们对最大值再放大一点,作为坐标轴的最大值
max_val=max_val*1.1;
//现在我们计算每个数据的坐标轴
//这里我们将计算出来的坐标轴数据写入到我们的数组对象当中去
var points=[];
for(var i=0;i
var v=data[i];
var px=cell_width*(i+1);
var py=can1.height-can1.height*(v/max_val);
points.push({"x":px,"y":py});
}
//开始绘制折线
cxt.beginPath();
cxt.moveTo(points[0].x,points[0].y);
for(var j=1;j
cxt.lineTo(points[j].x,points[j].y);
}
cxt.strokeStyle="#ee0000";
cxt.stroke();
//绘制坐标的小圆点
for(var j in points){
var p=points[j];
cxt.beginPath();
cxt.arc(p.x,p.y,6,2*Math.PI);
cxt.fillStyle="#ee0000";
cxt.fill();
}
}
转自:http://blog.sina.com.cn/s/blog_7256fe8f010165cb.html
用html编写一幅简单的画,使用html5画简单的折线图相关推荐
- 新手如何画出自定义View(Android——自定义折线图)
在正式开始之前 我还是打算先说几句废话: 1.本文章是让初学者画自定义View所以不会对代码进行过多的解释 2.为什么不用现有强大的图表框架 列如:Android HelloChart 或者 MPAn ...
- python画散点图程序-Python散点图与折线图绘制过程解析
这篇文章主要介绍了Python散点图与折线图绘制过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在数据分析的过程中,经常需要将数据可视化,目 ...
- 电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享,HTML5制作简单画板
复制代码代 - phpStudy...
html5教程制作简单画板代码分享 HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...
- 如何用R画折线图,散点图,平滑曲线图
如何用R画折线图,散点图,平滑曲线图 例子: week 1 2 3 4 5 6 x 3 8 19 24 6 1 y 1 25 21 3 2 1 要求是以week为横坐标,画出x-week,y-week ...
- 简笔画花边边框超简单_简单花边边框简笔画的高清图片
边框的类型有很多种,其中,花边的边框最受人们喜欢,偶很多人喜欢画简单的花边边框简笔画,而且还是高清的.今天先和学习啦小编一起欣赏这些简单花边边框简笔画的高清图片,希望你会有所收获的. 简单花边边框简笔 ...
- PHP画像素直线,画像素画原来如此简单!绝对是手残党的福利
[PConline 杂谈]你听说过像素画吗?最近网络上出现很多利用像素绘制的卡通图案,我们把这些称之为像素画.其绘画过程简单,不需要任何绘画的功底,可以说绝对是手残党的福利.但是对于像素画你可能会感觉 ...
- 用python画简单雪花剪纸步骤图解_简单雪花剪纸步骤图解
简单雪花剪纸步骤图解 民间剪纸的表现语言不是简单的平铺直叙,而是托物寄语,借用那些约定成俗的观念化形象,来寄托人们对美好生活的向往,对吉祥幸福的期盼.下面是小编为大家整理的.简单雪花剪纸步骤图案,希望 ...
- python简单代码画曲线图教程-用Python画论文折线图、曲线图?几个代码模板轻松搞定!...
前言 这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
- python简单代码画曲线图教程-Python绘制折线图和散点图的详细方法介绍(代码示例)...
本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...
最新文章
- 公共基础选择题前10t
- 5天玩转C#并行和多线程编程 —— 第五天 多线程编程大总结
- 数据库系统的体系结构知识笔记
- OpenCV与图像处理学习十七——OpenCV人脸检测(含代码)
- 基于box2dWeb开发的切水果游戏总结
- js触发button的点击事件
- 同步电脑与手机,让手机变身无线Modem
- c# 如何读取和写入ini(配置文件)
- centos网卡错误Device eth0 does not seem to be present
- linux 每日学一点《linux性能测试初步概况》
- h.265/HEVC 和 h.264/AVC 比较,在技术上的改进和优势
- 计算机无法创建新文件夹,使用win10系统时,发现无法新建文件夹怎么办,学会这招即可修复...
- php日期自动加一天,php 当前日期加一天和指定日期加一天
- 【好文】太用力的人跑不远
- 招商银行信用卡中心邀请你参加M-Geeker技术竞赛初赛
- CTF新近学习经验和疑难
- 如何将推荐系统与异构数据巧妙结合——专访微软资深研究员谢幸博士
- kuka c2配置 输入输出
- 【已解决】win10 “你不能访问此共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问。
- 分布式消息中间件Metaq发布1.4.3
热门文章
- Win11任务栏如何设置在顶部
- ie浏览器安全使用网银支付功能方法
- 搜狐视频怎么清除应用缓存
- Arrays.asList()和Collections.singletonList()比较
- SpringBoot默认包扫描机制及@ComponentScan指定扫描路径详解
- 【POI】读取Excel表中的数据
- MongoDB解决“Error parsing YAML config file: yaml-cpp: error at line 2, column value(安装服务)
- linux close 头文件,Linux open close read write lseek函数的使用
- 大于小于优化_架构 - 以MySQL为例,详解数据库索引原理及深度优化
- python 折线图中文乱码_彻底解决 Python画图中文乱码问题--Pyplotz组件