html绘制直角坐标系,canvas画直角坐标系
canvas画直角坐标系
2017年3月17日
利用canvas画直角坐标系其实挺简单的,只要确定了原点(0,0)点,也可以是其他的点,只要自己知道那是原点就行!知道了原点再分别向X轴方向和Y轴方向画两条直线即可(X轴和Y轴也是相对的,这个纯看个人喜好和实际需求)。
闲话不多说直接看代码:
canvas画直角坐标系和柱状图
canvas画直角坐标系及柱状图
如果您只看到了这句话,那么您的浏览器该升级换代了!
var canvas=document.getElementById("canvas");
var cxt = canvas.getContext("2d");
//通过id获取canvas画布,并获得cxt画笔,canvas目前只支持2d效果,所以“2d”不能省;
var arr = [16,15,20,21]//利用数组模拟柱状图的数据
Coordinate(50,350);//自己写的一个直角坐标系
ColumnChart1(50,350,arr); //一个简单的柱状图函数
/*为了有个简单的动画效果,canvas绘制完成以后先将它隐藏,然后用jQuery的slideDown()方法淡入显示*/
$("#canvas").hide();
$("#canvas").slideDown(1000);
然后就是直角坐标系的绘制方法(如果那位大神看到了功能更加完善,代码量可以更加精简的,请不吝赐教,谢谢):function Coordinate(x,y){
//x为横坐标起点,Y为纵坐标起点
var originX = x;
var originY = y;
//设置原点的那个文字的样式,并绘制出来
cxt.font = "2rem 微软雅黑";
cxt.fillText("0",originX-10,originY+15);//此处-10和+15是为了调整字的位置
cxt.strokeStyle = "black";//设置坐标系X轴Y轴的颜色,绘制线条用strockeStyle属性,绘制填充色块用fillStyle属性;
cxt.lineWidth = 3;//设置线条粗细,这里为了方便看设置了3个像素,可以根据情况自行调整
//开始绘制Y轴
cxt.beginPath();//开启路径
cxt.moveTo(originX,originY);//x轴与y轴的起点位置
cxt.lineTo(originX,originY-320);//轴的终点位置,即X大小不变,只是改变了Y点位置(根据实际情况做调整);
cxt.stroke();//将这条线绘制出来
//画小箭头
cxt.moveTo(originX,originY-320);//小箭头起点位置即为Y轴终点位置
cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是设置小箭头的终点位置,小箭头的大小和尖锐程度请自行摸索
cxt.stroke();
cxt.moveTo(originX,originY-320);
cxt.lineTo(originX-3,originY-310);
cxt.stroke();
//画横坐标
//绘制X轴和Y轴相似
cxt.moveTo(originX,originY);
cxt.lineTo(originX+450,originY);
cxt.stroke();
//画小箭头
cxt.moveTo(originX+450,originY);
cxt.lineTo(originX+440,originY-3);
cxt.stroke();
cxt.moveTo(originX+450,originY);
cxt.lineTo(originX+440,originY+3);
cxt.stroke();
cxt.fillText("Y轴",originX-5,originY-325)
}
然后就是柱状图的绘制方法:function ColumnChart1(x,y,arr){
//绘制之前先清空原有的柱状图所占区域
cxt.clearRect(x,y,500,0);
var arrColor = ["red","yellow","blue","purple","green","mauve"];//为了使每个柱子的颜色不一样,如果可以尽量用#******或rgb()方法设置颜色,因为我这样直接用单词有些浏览器对个别颜色不识别(头疼的IE)
//请务必保持x,y值与坐标系的x,y值相同
this.arr= arr;
for (var i=0;i
if(i==0){
var originX = x+40;
var originY = y-1;
}else{
var originX = i*70+80;
var originY = y-1;
}
cxt.beginPath();
cxt.strokeStyle = arrColor[i];//设置线条颜色
cxt.lineWidth = 20;//这里为了方便直接将线条的宽度设置为20,这样就可以模拟柱子
cxt.moveTo(originX+(i+1)*20,originY);//柱子的顶点位置,这里因为数组内数字小,所以都乘十了,这样有利于小数字的表现
cxt.lineTo(originX+(i+1)*20,originY-(arr[i]*10));//调整每根柱子的间距;
cxt.stroke();
cxt.font = "20px 宋体"
cxt.fillText(arr[i],originX+(i+1)*20-10,originY-(arr[i]*10+3));
//文字的绘制
cxt.font = "13px 宋体"
cxt.fillText("第"+(i+1)+"季度业绩",originX+(i+1)*20-35,originY+20)
}
}
如果还想图表看起来更加美观,可以用canvas提供的shadowColor、shadowOffsetX、shadowOffsetY等相关属性设置阴影。
同时以柱子的顶点为圆心画一个颜色略异于柱子的椭圆即可。
html绘制直角坐标系,canvas画直角坐标系相关推荐
- JavaScript - canvas - 画直角坐标系
文章目录 预备知识 关于 canvas 画布的原点 画直线 项目结构 HTML CSS JavaScript 效果 设置 canvas 起点偏移(平移变换) JavaScript 效果 画空心三角形 ...
- matlab画空间直角坐标系,matlab画直角坐标系
空间直角坐标 XYZ 换算为经纬度 BL 程序 (matlab 编程)度分秒转弧... [1,-1]; y2=2*exp(-0.5*x).*sin(2*pi*x); x1=(0:12)/2; y3=2 ...
- html绘制直角坐标系,几何画板如何画直角坐标系并描点
直角坐标系相信大家都不陌生,在代数和几何学中都随处课件其身影,其中包括了平面直角坐标系和空间直角坐标系.想要画一个坐标点,前提就是要建立坐标系,对于画板新手来说,并不知道如何在坐标系中描点,下面将给大 ...
- java canvas 画线_canvas教程(二) 绘制直线
经过 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们都应该先了解 canvas 的坐标系 s canvas 的坐标系 要绘制之 ...
- html 绘制正方形,HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 HTML5之Canvas画正方形 function drawFour(id) { //获取canvas元素 var canvas = document. ...
- php椭圆形制图,canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结
canvas元素在html5中是用于在浏览器中画图的,所以canvas可以实现绘制很多不同的图,那么,今天我们就来看一看canvas如何来绘制一个椭圆形,话不多说,让我们来直接看正文吧. 首先我们来看 ...
- android canvas 画按钮,Android 用Canvas轻松绘制一个时钟
接下来这篇文章主要是结束如何轻松自定义一个View并使用Canvas绘制一个时钟的案例,话不多说先上图瞅瞅,一共实现了两种效果,一种是秒动(秒针一秒走一针).另一种是连动式的,秒针不会停会一直走动,话 ...
- php绘制空心圆,HTML_html5使用canvas画空心圆与实心圆,这里给大家分享的是一个学习c - phpStudy...
html5使用canvas画空心圆与实心圆 这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单. 复制代码代码如下: var canvas=document.getEl ...
- [html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
最新文章
- python redis链接建立实现分析
- Java 自动装箱性能
- jq定制上传按钮,选择文件就上传
- 小明分享|8ms平台下工程源码分析
- 第十天:估算活动持续时间,类比估算,参数估算,自下而上估算,三点估算解析表
- oracle 数据库运行模式
- [51nod] 1267 4个数和为0
- 奥迪坚为中民燃气打造专业便民服务呼叫中心
- MySQL学习【第五篇SQL语句上】
- EXCHANGE 系列
- python pip下载安装教程_python详细安装pip教程
- 2021年面试前端岗位需要注意什么?
- html的strong标签是什么意思,Strong标签和B标签怎么用?区别有哪些
- From Mother Teresa
- 教你如何实现网页自由!
- 315晚会实在涨知识
- vs2010c语言一闪而过,[转载]关于vs2010运行C程序时,运行结果窗口一闪而过的问题...
- 1688电商API接口-无需多个 电商平台单独对接
- time_expire时间过短,刷卡至少1分钟,其他5分钟
- html焦点图自动轮播,JS实现焦点图轮播效果的方法详解