canvas的基本使用
一、定义
- canvas最早是由Apple引入Webkit的，<canvas>元素包含于HTML5中
- HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，可以控制其每一像素，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
二、基本使用（步骤）
①创建canvas元素，向HTML5页面添加canvas元素（准备画布）
②设置画布宽度和高度（默认是白色的，大小默认300*150）
③通过JavaScript来绘制（在什么地方画）
④准备绘制工具（获取上下文，指一种环境getContext('2d')）
⑤利用工具绘图：移动画笔（moveTo），规定轨迹（lineTo），描边（stroke）或者填充（fill）....
三、体验
①画一条直线
- 关于画布大小的书写位置：设置画布大小在canvas的行内设置，不建议内嵌式或者外链式
- 关于轨迹的理解：轨迹是看不见的，只有通过描边或者填充才能看见形态
- 关于2d的说明：目前只有2d，未来可能出现3d，目前的网页的3d效果通常是使用Web GL制作的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
②画两条平行线
- 线条的默认大小和颜色：默认宽度是1px，默认颜色是黑色
- 线条模糊的原因：线条的大小是1像素，是画在画布像素刻度中间的位置，所以会出现不饱和的情况，颜色偏灰，并且因为屏幕的最小单位是1px，所以画布显示的大小会略大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
ctx.moveTo(100,100-0.5);
ctx.lineTo(300,100-0.5); ctx.moveTo(100,200);
ctx.lineTo(300,200); ctx.stroke();
</script>
</body>
</html>
③画三条不同颜色和宽度的平行线
- 颜色：strokeStyle=‘ 颜色’
- 宽度：lineWidth=‘ num ’ （没有单位）
- 解决样式覆盖问题：开启新的路径 beginPath（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
// 红色 10px
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.strokeStyle='red';
ctx.lineWidth='10';
ctx.stroke();
// 蓝色 20px
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(300,200);
ctx.strokeStyle='blue';
ctx.lineWidth='20';
ctx.stroke();
// 黄色 30px
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(300,300);
ctx.strokeStyle='yellow';
ctx.lineWidth='30';
ctx.stroke();
</script>
</body>
</html>
④绘制一个填充颜色的三角形
- 填充 ：fill( )
- 填充颜色： fillStyle=‘颜色’
- 描边情况下起始点和lineto的结束点无法完全闭合（缺角）的解决办法：closePath( ) 自动闭合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
//ctx.lineTo(100,100);无法完全闭合
ctx.closePath();
//ctx.strokeStyle='red';
ctx.fillStyle='red';
//ctx.lineWidth='10';
//ctx.stroke();
ctx.fill();
</script>
</body>
</html>
⑤绘制一个镂空的正方形
- 画法：大正方形顺时针，小正方形逆时针
- 原理：非零环绕填充规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
// 大正方形(顺时针)
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
// 小正方形(逆时针)
ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();
// 填充
ctx.fillStyle='red';
ctx.fill();
</script>
</body>
</html>
⑥两端样式和拐点样式
- 两端样式：lineCap=“ ” 可以填butt（默认） 、square（方）、round（圆）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
// 两端默认 30px
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineWidth='30';
ctx.lineCap='butt';
ctx.stroke();
// 两端方形 30px
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(300,200);
ctx.lineWidth='30';
ctx.lineCap='square'
ctx.stroke();
// 两端圆形 30px
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(300,300);
ctx.lineWidth='30';
ctx.lineCap='round';
ctx.stroke();
</script>
</body>
</html>
- 拐点样式：lineJoin=‘ ’ 可以填miter（默认）、bevel（方）、round（圆）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
// 拐点默认 30px
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,150);
ctx.lineTo(300,100);
ctx.lineWidth='30';
ctx.lineJoin='miter';
ctx.stroke();
// 拐点方形 30px
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,250);
ctx.lineTo(300,200);
ctx.lineWidth='30';
ctx.lineJoin='bevel'
ctx.stroke();
// 拐点圆形 30px
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(200,350);
ctx.lineTo(300,300);
ctx.lineWidth='30';
ctx.lineJoin='round';
ctx.stroke();
</script>
</body>
</html>
⑦绘制虚线
- 设置虚线的排列方式：setlineDash（[ ]）数组用来描述排列方式的
- 获取虚线的排列方式：getlineDash（）获取的是不重复的那一段排列方式
- 虚线偏移量：lineDashoffset=' num ' 如果是正的，往后偏移；如果是负的往前偏移
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
//虚线是由一段虚线加一段实线组成的,数组描述的就是虚线和实线的大小
ctx.setLineDash([5,10,30,20]);
console.log(ctx.getLineDash());//(4) [5, 10, 30, 20]
ctx.lineDashOffset=-20;
ctx.lineWidth=10;
ctx.stroke();
</script>
</body>
</html>
⑧绘制一个颜色渐变的矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
ctx.lineWidth=100;
for(var i=0;i<255;i++){
ctx.beginPath();
ctx.moveTo(100+i-1,100);
ctx.lineTo(100+i,100);
ctx.strokeStyle='rgba('+i+',0,0)';
ctx.stroke();
}
</script>
</body>
</html>
⑨绘制折线图（面向对象）
- 绘制网格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
//网格的大小,画布的宽度和高度
var gridSize=10;
var canvasHeight=ctx.canvas.height;
var canvasWidth=ctx.canvas.width;
//x轴方向的线
var xLineTotal=Math.floor(canvasHeight/gridSize);
for(var i=0;i<xLineTotal;i++){
ctx.beginPath();
ctx.moveTo(0,i*gridSize-0.5);
ctx.lineTo(canvasWidth,i*gridSize-0.5);
ctx.strokeStyle='#eee';
ctx.stroke();
}
//y轴方向的线
var yLineTotal=Math.floor(canvasWidth/gridSize);
for(var i=0;i<yLineTotal;i++){
ctx.beginPath();
ctx.moveTo(i*gridSize-0.5,0);
ctx.lineTo(i*gridSize-0.5,canvasHeight);
ctx.strokeStyle='#eee';
ctx.stroke();
}
</script>
</body>
</html>
- 绘制坐标系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
// 确定原点的坐标(x0,y0)
var space=20;
var canvasWidth=ctx.canvas.width;
var canvasHeight=ctx.canvas.height;
var x0=space;
var y0=canvasHeight-space;
// 绘制x轴
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(canvasWidth-space,y0);
// 绘制x轴的箭头
var arrowSize=10;
ctx.lineTo(canvasWidth-space-arrowSize,y0+arrowSize/2);
ctx.lineTo(canvasWidth-space-arrowSize,y0-arrowSize/2);
ctx.lineTo(canvasWidth-space,y0);
ctx.fill();
ctx.stroke();
// 绘制y轴
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(space,space);
// 绘制y轴的箭头
ctx.lineTo(space+arrowSize/2,space+arrowSize);
ctx.lineTo(space-arrowSize/2,space+arrowSize);
ctx.lineTo(space,space);
ctx.fill();
ctx.stroke();
</script>
</body>
</html
- 绘制点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
// 点坐标
var coordinate={
x:100,
y:100
}
// 点的尺寸大小
var dottedSize=10;
// 在画布上绘制点
ctx.moveTo(coordinate.x-dottedSize/2,coordinate.y-dottedSize/2);
ctx.lineTo(coordinate.x+dottedSize/2,coordinate.y-dottedSize/2);
ctx.lineTo(coordinate.x+dottedSize/2,coordinate.y+dottedSize/2);
ctx.lineTo(coordinate.x-dottedSize/2,coordinate.y+dottedSize/2);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
- 面向对象的方式绘制折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext('2d');
/* 1.构造折线图的函数 */
var LineChart=function(ctx){
// 获取绘图工具
this.ctx=ctx||document.querySelector('canvas').getContext('2d');
// 获取画布的大小
this.canvasWidth=this.ctx.canvas.width;
this.canvasHeight=this.ctx.canvas.height;
// 网格的大小
this.gridSize=10;
// 坐标系的间距
this.space=20;
// 坐标原点
this.x0=this.space;
this.y0=this.canvasHeight-this.space;
// 箭头的大小
this.arrowSize=10;
// 绘制点的大小
this.dottedSize=6;
}
/* 2.添加原型方法 */
// 初始化
LineChart.prototype.init=function(data){
this.drawGrid();
this.drawAxis();
this.drawDotted(data);
};
// 绘制网格
LineChart.prototype.drawGrid=function(){
// x轴方向的线
var xLineTotal=Math.floor(this.canvasHeight/this.gridSize);
this.ctx.strokeStyle='#eee';
for(var i=0;i<xLineTotal;i++){
this.ctx.beginPath();
this.ctx.moveTo(0,i*this.gridSize-0.5);
this.ctx.lineTo(this.canvasWidth,i*this.gridSize-0.5);
this.ctx.stroke();
}
// y轴方向的线
var yLineTotal=Math.floor(this.canvasWidth/this.gridSize);
for(var i=0;i<yLineTotal;i++){
this.ctx.beginPath();
this.ctx.moveTo(i*this.gridSize-0.5,0);
this.ctx.lineTo(i*this.gridSize-0.5,this.canvasHeight);
this.ctx.stroke();
}
};
//绘制坐标系
LineChart.prototype.drawAxis=function(){
// x轴和x轴的箭头
this.ctx.beginPath();
this.ctx.strokeStyle='#000';
this.ctx.moveTo(this.x0,this.y0);
this.ctx.lineTo(this.canvasWidth-this.space,this.y0);
this.ctx.lineTo(this.canvasWidth-this.space-this.arrowSize,this.y0+this.arrowSize/2);
this.ctx.lineTo(this.canvasWidth-this.space-this.arrowSize,this.y0-this.arrowSize/2);
this.ctx.lineTo(this.canvasWidth-this.space,this.y0);
this.ctx.stroke();
this.ctx.fill();
// y轴和y轴的箭头
this.ctx.beginPath();
this.ctx.strokeStyle='#000';
this.ctx.moveTo(this.x0,this.y0);
this.ctx.lineTo(this.space,this.space);
this.ctx.lineTo(this.space+this.arrowSize/2,this.space+this.arrowSize);
this.ctx.lineTo(this.space-this.arrowSize/2,this.space+this.arrowSize);
this.ctx.lineTo(this.space,this.space);
this.ctx.stroke();
this.ctx.fill();
};
//绘制所有点
LineChart.prototype.drawDotted=function(data){
//转化当前对象为that,因为后面循环内的this已经不是当前对象
var that=this;
data.forEach(function(item,i){
// 数据的坐标需要转换为canvas坐标
var canvasX=that.x0+item.x;//x=原点的x坐标+数据的x坐标
var canvasY=that.y0-item.y;//y=原点的y坐标+数据的y坐标
// 进行点的绘制
that.ctx.beginPath();
that.ctx.moveTo(canvasX-that.dottedSize/2,canvasY-that.dottedSize/2);
that.ctx.moveTo(canvasX+that.dottedSize/2,canvasY-that.dottedSize/2);
that.ctx.moveTo(canvasX+that.dottedSize/2,canvasY+that.dottedSize/2);
that.ctx.moveTo(canvasX-that.dottedSize/2,canvasY+that.dottedSize/2);
that.ctx.closePath();
that.ctx.fill();
// 连线
if(i==0){//第一个点,起点是x0,y0
that.ctx.beginPath();
that.ctx.moveTo(that.x0,that.y0);
that.ctx.lineTo(canvasX,canvasY);
that.ctx.stroke();
}else{//后面的点,起点是上一个点
that.ctx.beginPath();
that.ctx.moveTo(prevCanvasX,prevCanvasY);
that.ctx.lineTo(canvasX,canvasY);
that.ctx.stroke();
}
// 记录当前的坐标,下一次要用
prevCanvasX=canvasX;
prevCanvasY=canvasY;
});
};
/* 3.数据和实例化对象 */
var data=[
{x:100,y:120},
{x:200,y:160},
{x:300,y:240},
{x:400,y:320},
{x:500,y:80}
]
var lineChart=new LineChart();
lineChart.init(data);
</script>
</body>
</html>
canvas的基本使用的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- kubernetes-dashboard登录出现forbidden 403
登录k8s dashboard https://xxxxx:6443/api/v1/namespaces/kube-system/services/https:kubernetes-dashboard ...
- Openshift概念
Openshift是一个开源容器云平台,是一个基于主流的容器技术Docker和K8s构建的云平台.Openshift底层以Docker作为容器引擎驱动,以K8s作为容器编排引擎组件,并提供了开发语言, ...
- C#实现AES加密解密
AES AES 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法 Rijndael(读作rain-dahl)是由美 ...
- C# vb .net实现黑白效果特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的黑白效果效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- 表单提交学习笔记（三）—利用Request.Files上传图片并预览
一.html页面如下 <div id="container"> <form id="myForm"> <p class=" ...
- 自己用JQueryUI封装了几个系统常用对话框
/* * @功能描述:各种系统消息框 * @前置插件:JQueryUI * @开 发 者:魏巍 * @开发日期:2015-04-15 * @version 1.0 */ var SF = {}; SF ...
- jQuery实现图片上传
$('input[type="file"]').change(function(event) { var currentTarget = event.currentTarget; ...
- js获取列表多条数据(接口)
读取数据://ajax去服务器端校验 $.ajax({ type:"post", url:"http://", data:{deviceid:1}, dataT ...
- Mybatis自动生成代码，MyBatis Generator
这还是在学校里跟老师学到的办法,然后随便在csdn下载一个并调试到可以用的状态. 基本由这几个文件组成,一个mysql连接的jar包.一个用于自动生成的配置文件,一个自动生成的jar包,运行jar包语 ...
- 10分钟学会js处理json常用方法
一.json定义 JSON ( JavaScript Object Notation) ,它是一串字符串 只不过元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "&q ...