学习记录(一)之h5_canvas
canvas(画布)
canvas(画布):
利用JS在网页中绘制图像。
标签:<canvas></canvas>
属性:height,width(宽高属性要写在行内样式中);
公共步骤:
1.获取对象
2.准备绘制工具--获取上下文
方法:
起始点坐标: ctx.moveTo(x轴坐标,y轴坐标);
画线: ctx.lineTo(x坐标,y坐标)
描边颜色: ctx.style="#f00";
描边宽度: ctx.lineWidth=0;
填充颜色: ctx.fillStyle="aqua";
填充: ctx.fill();
描边(默认:黑色1px): ctx.stroke();
开辟新路径: ctx.beginPath();
定义一个渐变方案-保存在一个变量中:
var mylinear.creatliGradient(起始坐标,起始坐标,结束坐标,结束坐标);
mylinear.addColorStop(位置,"#00f");
mylinear.addColorStop(位置,"#0ff");
给矩形,添加渐变色:
ctx.fillstyle=mylinear;
ctx.rect(100,100,200,200);
绘制描边矩形:ctx.strokeRect(起始坐标,起始坐标结束坐标,结束坐标);
绘制填充矩形 ctx.fillRect(起始坐标,起始坐标结束坐标,结束坐标)
清除矩形ctx.clearRect(起始坐标,起始坐标,结束坐标,结束坐标)
设置文本:
ctx.font="24px 微软雅黑";//字体
ctx.fillstyl="#f00";//字体颜色
ctx.text.align="left";//文本对齐方式有三个值:left,right,center
ctx.textBaseline="midden";//基线对齐方式三个值:middle,top,bottom
ctx.fillText("字符串", 起始坐标,起始坐标);
画圆: ctx.arc(圆心,圆心,半径,起始角,结束角,顺/逆时针)
创建img图片:
var img=new Img();
img src="img";
img.onload=function(){
ctx.drawImage(img,0,0,512,265)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>线</title>
<style type="text/css">
canvas{
border: solid 1px #000;
}
</style>
</head>
<body>
<canvas width="500" height="500" id="mycanvas"></canvas>
<script type="text/javascript">
var mycanvas=document.getElementById("mycanvas"); //获取对象
var ctx=mycanvas.getContext("2d"); //准备绘制工具 //起始点坐标
ctx.moveTo(100,100.5); //画线
ctx.lineTo(300,100.5); //描边颜色
ctx.style="#f00"; //描边宽度
ctx.lineWidth=10; //填充颜色
ctx.fillStyle="aqua"; //填充
ctx.fill(); //描边(默认:黑色1px)
ctx.stroke(); //开辟新路径
ctx.beginPath(); //定义一个渐变方案-保存在一个变量中
var mylinear.creatliGradient(100,100,300,300);
mylinear.addColorStop(0,"#00f");
mylinear.addColorStop(0.5,"#0ff");
mylinear.addColorStop(1,"#0f0");
//绘制矩形,添加渐变色
ctx.fillstyle=mylinear;
ctx.rect(100,100,200,200);
/*绘制描边矩形
ctx.strokeRect(100,100,300,200);
绘制填充矩形
ctx.fillRect(100,100,200,300);*/ //清除矩形
ctx.clearRect(200,200,100,100) //设置文本
ctx.font="24px 微软雅黑";//字体
ctx.fillstyl="#f00";//字体颜色
ctx.text.align="left";//文本对齐方式有三个值:left,right,center
ctx.textBaseline="midden";//基线对齐方式三个值:middle,top,bottom
ctx.fillText("hello",100,100); //画圆
ctx.arc(100,100,100,0,2*Math.PI,false) //图片(在script中的src除外,其他src都是异步);
var img=document.getElementsByTagName("img")[0];
ctx.drawImage(img,0,0);
//解决方法一,要放在.onloada方法中--等待所有资源下载完成后再去执行; //解决异步的第二种方法
//创建img图片
var img=new Img();
img src="img";
img.onload=function(){
ctx.drawImage(img,0,0,512,265)
} </script>
</body>
</html>
实例:用canvas绘制动态折线图和柱形图
注意:canvas坐标原点与自定义坐标之间的换算
1.折线图:例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
canvas{
border: solid 1px #000;
margin-left: 300px;
}
</style>
</head>
<body>
<canvas width="600" height="400" id="mycanvas"></canvas>
<script type="text/javascript">
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d");
//网格-循环添加-定义间隔变量space-横线划线起点(0,space*i)终点(canvasw,space*i)
var space=10;
var canvasw=600;
var canvash=400;
for (var i = 0; i<40; i++) {
ctx.moveTo(0,space*i+0.5);
ctx.lineTo(canvasw,space*i+0.5);
ctx.strokeStyle="#eee";
ctx.stroke();
}
//同理-竖线
for (var i = 0; i<60; i++) {
ctx.moveTo(space*i+0.5,0);
ctx.lineTo(space*i+0.5,canvash);
ctx.strokeStyle="#eee";
ctx.stroke();
}
//画横纵坐标轴-定义坐标原点(x0,y0)--x轴起点(x0,y0),x轴终点(canvasw-x0,y0)
// 三角形/填充-起点(canvasw-x0,y0)-第二个点(canvasw-x0-6,y0-3)-第三个点(canvasw-x0-6,y0+3)-回到起点
var yd=30; //原点与边框的距离
var x0=yd;
var y0=Math.floor(canvash-yd);
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(canvasw-x0,y0);
ctx.strokeStyle="#000000"
ctx.stroke();
//三角形
ctx.moveTo(canvasw-x0,y0);
ctx.lineTo(canvasw-x0-6,y0-4);
ctx.lineTo(canvasw-x0-6,y0+4);
ctx.lineTo(canvasw-x0,y0);
ctx.fillStyle="#000000"
ctx.fill();
ctx.textAlign="left";
ctx.textBaseline="middle";
ctx.font="16px 微软雅黑"
ctx.fillText("X",canvasw-x0,y0)
//y轴
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x0,yd);
ctx.strokeStyle="#000000"
ctx.stroke();
//三角形
ctx.moveTo(x0,yd);
ctx.lineTo(x0-3,yd+6);
ctx.lineTo(x0+3,yd+6);
ctx.lineTo(x0,yd);
ctx.fillStyle="#000000"
ctx.fill();
ctx.textAlign="center";
ctx.textBaseline="bottom";
ctx.font="16px 微软雅黑"
ctx.fillText("Y",x0,yd) //数据
var arr=[
{
x:50,
y:350
},
{
x:150,
y:310
},
{
x:250,
y:50
},
{
x:350,
y:250
},
{
x:500,
y:200
}
] ctx.beginPath();
ctx.moveTo(x0,y0);
for(i=0;i<arr.length;i++){
//线段
ctx.lineTo(arr[i].x,y0-arr[i].y);
ctx.strokeStyle="#f00";
ctx.stroke();
//矩形
ctx.fillStyle="#f00";
ctx.fillRect(arr[i].x-3,y0-arr[i].y,6,6);
//文字
ctx.textAlign="left";
ctx.textBaseline="top";
ctx.fillStyle="#333";
ctx.fillText("("+arr[i].x+","+arr[i].y+")",arr[i].x,y0-arr[i].y) }
</script>
</body>
</html>
2.柱形图:例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
background-color: #efefef;
margin-left: 300px;
}
</style>
</head>
<body>
<canvas width="800" height="460" id="mycanvas"></canvas>
<script type="text/javascript">
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d"); var space=100;
var canvasw=ctx.canvas.width;
var canvash=ctx.canvas.height; //画横纵坐标轴-定义坐标原点(x0,y0)--x轴起点(x0,y0),x轴终点(canvasw-x0,y0)
var yd=30; //原点与边框的距离
var x0=yd;
var y0=Math.floor(canvash-yd);
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(canvasw-x0,y0);
ctx.strokeStyle="#000000"
ctx.stroke();
//y轴
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x0,yd);
ctx.strokeStyle="#000000"
ctx.stroke();
//横线
ctx.beginPath();
for (var i = 1; i<5; i++) {
ctx.moveTo(x0,y0-space*i);
ctx.lineTo(canvasw-x0,y0-space*i);
ctx.strokeStyle="#ccc";
ctx.stroke();
}
//前横线
ctx.beginPath();
for (var i = 0; i<5; i++) { ctx.moveTo(x0-6,y0-space*i);
ctx.lineTo(x0,y0-space*i);
ctx.strokeStyle="#333";
ctx.stroke(); ctx.font="12px 微软雅黑 ";
ctx.textAlign="right";
ctx.textBaseline="middle";
ctx.fillStyle="#333";
ctx.fillText(100*i,x0-6,y0-space*i)
}
var arr=[
{
x:"Mon",
y:50
},
{
x:"Tue",
y:110
},
{
x:"Wed",
y:150
},
{
x:"Thu",
y:350
},
{
x:"Fri",
y:200
},
{
x:"sat",
y:210
},
{
x:"sun",
y:230
}
] ctx.beginPath();
for (var i = 0; i<arr.length; i++) {
ctx.moveTo(x0+space*(i+1),y0);
ctx.lineTo(x0+space*(i+1),y0+6);
ctx.strokeStyle="#333";
ctx.stroke(); //星期
ctx.font="16px 微软雅黑 ";
ctx.textAlign="center";
ctx.textBaseline="top";
ctx.fillStyle="#333";
ctx.fillText(arr[i].x,x0+space*(i+1),y0+6);
//矩形
ctx.fillStyle="#f00";
ctx.fillRect(x0+space*(i+1)-30,y0-arr[i].y,60,arr[i].y);
ctx.textBaseline="top";
ctx.fillStyle="#333";
} </script>
</body>
</html>
学习记录(一)之h5_canvas的更多相关文章
- Quartz 学习记录1
原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...
- Java 静态内部类与非静态内部类 学习记录.
目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...
- Apache Shiro 学习记录4
今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...
- UWP学习记录12-应用到应用的通信
UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...
- UWP学习记录11-设计和UI
UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...
- UWP学习记录10-设计和UI之控件和模式7
UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...
- UWP学习记录9-设计和UI之控件和模式6
UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...
- UWP学习记录8-设计和UI之控件和模式5
UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...
- UWP学习记录7-设计和UI之控件和模式4
UWP学习记录7-设计和UI之控件和模式4 1.翻转视图 使用翻转视图浏览集合中的图像或其他项目(例如相册中的照片或产品详细信息页中的项目),一次显示一个项目. 对于触摸设备,轻扫某个项将在整个集合中 ...
随机推荐
- ubuntu18.04LTS设置静态IP
ubuntu18.04LTS设置静态IP 因为Ubuntu18.04采用的是netplan来管理network.所以在/etc/netplan/目录下有一个以yaml结尾的文件.比如01-networ ...
- 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件
微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...
- Kali学习笔记13：操作系统识别
为什么要扫描操作系统呢? 其实和上一篇博客:<服务扫描>类似,都是为了能够发现漏洞 发现什么漏洞? 不同的操作系统.相同操作系统不同版本,都存在着一些可以利用的漏洞 而且,不同的系统会默认 ...
- [Postman]Cookies(12)
Postman的本机应用程序提供 MANAGE COOKIES 模式,允许您编辑与每个域关联的Cookie. 前往cookie经理 要打开MANAGE COOKIES模式,请单击“ 发送”按钮下的 ...
- AI - 参考消息（References）
01 - Machine learning infographic 图片解读机器学习的基本概念.五大流派与九种常见算法 EN:http://usblogs.pwc.com/emerging-techn ...
- OS之进程管理---多线程模型和线程库(POSIX PTread)
多线程简介 线程是CPU使用的基本单元,包括线程ID,程序计数器.寄存器组.各自的堆栈等,在相同线程组中,所有线程共享进程代码段,数据段和其他系统资源. 传统的的单线程模式是每一个进程只能单个控制线程 ...
- python 安装numpy遇到无法卸载的解决办法
python 安装模块numpy遇到无法卸载的情况的解决办法 python在安装seaborn的时候,需要更新numpy模块,但是更新失败,输出下面的错误: Cannot uninstall 'num ...
- 关于mysql的update、delete、和insert into能否使用别名问题
在工作中遇到这样一个问题,就是mysql在insert into时能不能使用别名,大家会很奇怪为什么insert into使用别名呢?原因在于原来的项目中使用了user表,新项目要将user表拆分为u ...
- visual Studio 2017 扩展开发（三）《绑定快捷键到菜单项》
如何将键盘快捷方式映射到自定义按钮,怎么使用快捷键启动自己创建的菜单,刚开始做的时候迷糊了,找了很久.可能也是因为刚开始做不是很明白,后面慢慢就懂了.其实非常简单的. 很多快捷键已经在Visual s ...
- Struts框架(6)---action接收请求参数
action接收请求参数 在web开发中,去接收请求参数来获得表单信息非常的常见,自己也总结整理了有关Struts2通过action接收请求参数的几种方法. Struts2 提供三种数据封装的方式: ...