canvas学习之柱状图
项目地址:http://pan.baidu.com/s/1nvhWrwP
因为最近项目中使用到了图表,而且个人一直希望研究canvas,所以最近几天花时间对canvas好好研究了一下,并写了一个demo,下载demo下来后 npm install后,使用webpack打包后,可以找到canvas.html页面,看到具体效果,下面主要介绍我写的几个文件
canvas.js:技术绘图js
histogram.js:柱状图js
lineChart.js:折线图js
柱状图使用:
import {canvasPoint} from '../../assets/js/canvas';//引入的目的是获取点再canvas中的位置
import {basicInfo,histogramMousemoveEvent} from '../../assets/js/histogram';
//绘制图
function histogramCreate(width,point){
var canvas=document.getElementById('myCanvas');
if(!!width){
if(width > 758)
canvas.width = width;
}else{
var canvasWidth = document.getElementById('histogramPanel');
if(canvasWidth.offsetWidth > 758)
canvas.width = canvasWidth.offsetWidth;
}
addHistogramMousemove(canvas);
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
//绘制柱状图
basicInfo(ctx,[{num:2,name:"2017-04-01"},{num:10,name:"2017-04-02"},{num:15,name:"2017-04-03"},{num:20,name:"2017-04-04"}],point);
}
window.onload = function(){
histogramCreate();
}
window.onresize = function(){
histogramCreate();
}
//添加鼠标滑动监听事件
function addHistogramMousemove(canvas){
canvas.addEventListener("mousemove",function(e){
var point = canvasPoint(canvas,e);
histogramMousemoveEvent(canvas,point);
},false);
canvas.addEventListener("click",function(e){
var point = canvasPoint(canvas,e);
histogramMousemoveEvent(canvas,point);
},false);
}
转载于:https://www.cnblogs.com/mrzhu/p/6674904.html
canvas学习之柱状图相关推荐
- canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图 使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
- HTML5 Canvas 学习日志(三)
2019独角兽企业重金招聘Python工程师标准>>> HTML5 Canvas 学习日志(三) Canvas的11种合成 蓝色为destination,粉色为source 1 ...
- Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人 ...
- canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏-- canvas .利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜 实现 ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
- canvas学习绘制渐变色
1.createLinearGradient() 创建线性渐变 //Linear adj. 直线的 线性的 //Gradient n. 梯度 变化率 createLinearGradient(x1,y ...
- Canvas学习笔记之画线
Canvas学习笔记之画线 步骤 1.使用getElementById()获取canvas元素. 2.获取canvas的绘制环境getContext(). 3.进行绘制画笔的粗细和颜色定义,分别是li ...
- canvas学习这一片果然就够了(二)
canvas学习这一片果然就够了(二) 文章目录 canvas学习这一片果然就够了(二) 前言 一.实战基本篇 二.开启绘制形状实战 1.栅格 (grid) 和坐标空间 2.绘制矩形 三.绘制路径 ( ...
- canvas学习这一片果然就够了(一)
canvas学习这一片果然就够了(一) 文章目录 canvas学习这一片果然就够了(一) 前言 一.canvas基础篇 一.canvas是神马 二.可以用来干什么 三.浏览器支持情况 四.简单使用 - ...
最新文章
- 哪种编程语言又快又省电?有人对比了27种语言
- 9.LeetCode第350题---两个数组的交集2
- Keywords: Flash( Scaleform ) UI
- 数组、字符串及字符串相关函数
- Unknown SSL protocol error in connection to xxx:443
- JavaScript入门(part12)--内置对象
- UI5 registerModulePath
- 任意文件读取及删除漏洞
- 安装Quagga路由软件
- 微服务架构的核心要点和实现原理解析
- oracle数据库基础知识
- 系统集成项目管理工程师的考试,下午题怎么突破?
- uniapp怎么使用阿里矢量图标,阿里矢量图标下载,阿里矢量图标应用,改变iconfont,uniapp 引用阿里矢量图标
- 计算机cpu的字母,买电脑必看:CPU型号后的字母意思详解
- 怎么制作鸿蒙系统启动盘,dos系统启动盘怎样做
- 微信小程序 渲染层网络错误_渲染层网络层错误 微信小程序开发 - 云计算资讯 - 服务器之家...
- 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。
- 如何破解百度文库的防复制功能
- 怎样隐藏计算机中的文件夹,电脑上的文件夹不想被别人看到怎么办?如何隐藏电脑文件夹?-电脑文件夹怎么加密...
- 利用AUL工具恢复oracle dbf文件中的数据
热门文章
- 前沿 | 谷歌用深度学习进行深度预测
- 最全深度学习资源列表!
- php1045无法登录mysql_phpstudy安装完成后打开phpmyadmin提示#1045 无法登录 MySQL 服务器...
- PX4 的 ECL EKF 公式推导及代码解析
- Kaggle—So Easy!百行代码实现排名Top 5%的图像分类比赛
- YOLO:实时目标检测
- Matlab线性/非线性规划优化算法(3)
- Java 发起http GET POST请求实例
- android LinearLayout和RelativeLayout实现精确布局
- php study 直接显示代码_《细说PHP》第四版 样章 第18章 数据库抽象层PDO 12