【麦子学院】03.web前端开发之convas画布
2017-06-29 14:21
561 查看
1.简单了解canvas
canvas是在html5中新增的一个重要元素，专门用来绘制图形。1) 创建一个canvas画布
画布的创建方法：指定id、width（画布宽度）、height（画布高度）。
例如：<canvas id="canvas"width="500" height="350"></canvas>
上面这个实例的意思就是，创建一个画布，长度为500，高度为350.
2) 引入绘画脚本
引入脚本的方法：
比如：<script type="text/javascript"src="canvas.js" charset="utf-8"></script>
上面这个实例的意思就是：引入一个名为canvas的JS脚本，JS脚本的语言编码是utf-8
3) 使用draw函数进行绘画
在body的属性里面，使用onload="draw('canvas');"语句。调用脚本文件中的draw函数进行图形绘画。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>2.canvas绘制矩形
1、获取canvas元素用getElementById方法获取到canvas对象。
2、取得上下文
在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext() 方法获得图形上下文。在draw函数中把参数设置为“2d”。
3、填充与会绘制边框
canvas绘制有两种方法：
1）、填充（fill）
填充是将图形内部填满。
2）、绘制边框（stroke）
绘制边框是不把图形内部填满，只是绘制图形的外框。
4、设置绘制样式
当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制。
1）、fillStyle属性
填充的样式，在这个属性里面设置填入的填充颜色值。
2）、strokeStyle属性
图形边框的样式，在这个属性里面设置填入边框的填充颜色。
5、指定画笔宽度
通过对上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。
6、设置颜色值
绘制图形的时候要填充的颜色或者边框分别可以通过fillStyle属性和strokeStyle属性来指定。
颜色的值可以使用
16进制的颜色值（#000000）
颜色名（black）
rgb（rgba(0,0,0）)
rgba（rgba(0,0,0,0.1)）
7、绘制矩形
使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框。
context.fillRect（x,y,width,height）
context.strokeRect（x,y,width,height）
这两种方法的参数都是一样的，X是指矩形的起点横坐标，y是指矩形的纵坐标，坐标的原点是canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制矩形</title>
<script type="text/javascript" src="canvas.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
/**
* convas.js
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.strokeStyle = "#fff";
context.lineWidth = 5;
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120);
context.strokeRect(110,110,180,120);
}3.canvas绘制圆形
1、开始创建路径使用图形上下文对象的beginPath方法。
context.beginPath（）;
2、创建图形路径
创建圆形路径时，需要使用图形上下文对象的arc方法。
context.arc（x,y,radius,starAngle,endAngle,anticlockwise）
x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。
绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。
var radius = degrees*Math.PI/180
这个里面的Math.PI表示的角度是180度，Math.PI*2的角度是360度。
3、创建完成关闭路径
使用图形上下文对象的closePath方法将路径关闭。
context.closepath();
4、设置绘制样式然后调用绘制方法进行绘制
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制圆形</title>
<script type="text/javascript" src="canvas.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
Convas.js
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,400,400);
for(var i=0;i<10;i++){
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.fillStyle = "rgba(255,0,0,0.25)";
context.fill();
}
}
4.canvas绘制文字
绘制字体时可以使用fillText方法或者strokeText方法。fillText方法用填充的方式来绘制字符串；
context.fillText（text，x,y,[maxwidth]）;
strokeText方法用轮廓的方式来绘制字符串；
context.strokeText（text，x，y,[maxwidth]）;
第一个参数text表示要绘制的文字，第二个参数X表示要绘制的文字的起点横坐标，第三个参数Y表示要绘制的文字的起点纵坐标，第4个参数maxwidth为可选参数，表示显示文字的时候最大的宽度，可以防止文字溢出。
1、 设置文字字体
context.font = "font-weight font-sizefont-family ";
context.font有三个参数，第一个参数font-weight
第二个参数font-size规定文本的字体尺寸
第三个参数font-family 规定文本的字体系列
font-family 可以的值是'ariSDal','arial','宋体','微软雅黑'...等等任何字体。
2、 设置文字垂直对齐方式
context.textBaseline ='alphabetic';
属性值可以是top（顶部对齐）、hanging（悬挂）、middle（中间对齐）、、bottom（底部对齐）、alphabetic是默认值。
3、 设置文字水平对齐方式
conText.textAlign ="start"
属性值可以设置为：start、end、left、right、center。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制文字</title>
<script type="text/javascript" src="canvas.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="800" height="300" ></canvas>
</body>
</html>
Convas.js
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(0,0,800,300);
context.fillStyle = '#fff';
context.strokeStyle = '#fff';
context.font = "bold 40px '字体','字体','微软雅黑','宋体'";
context.textBaseline = 'hanging';
// context.textAlign = 'start';
context.fillText('欢迎收看麦子学院推出的' ,10 ,40);
context.fillText('《HTML5+CSS3轻松入门与实战》',40,110);
context.fillText('视频教程',580,180);
// context.fillText('123456789111121314151617181920212223242526272829《HTML5+CSS3轻松入门与实战》《HTML5+CSS3轻松入门与实战》《HTML5+CSS3轻松入门与实战》',0,230,800);
// context.strokeText('麦子学院',0,40);
}5、保存文件
很多时候绘制完成的图片需要保存，那么我们就可以使用到Canvas API来完成这最后一步！Canvas API使用toDataURL方法把绘画的状态输出到一个 data URL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。
Canvas API保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。
什么是dataURL ?
data URL实际上就是base64位编码的URL,主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件。
data URL的格式“data:image/jpeg;base64,/9j/4...”
toDataURL的使用方法
canvas.toDataURL（type）;
这个方法使用一个参数type，表述输出数据的MIME类型。
什么是MIME类型：
jpg image/jpeg
convas.js
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.fillRect(0,0,400,300);
window.location = canvas.toDataURL('image/png');
}6、convas小示例
在canvas画布中制作动画相对来说很简单，实际上就是不断变化坐标、擦除、重绘、的过程。1、使用setInterval方法设置动画的间隔时间。
setInterval(code,millisec)
setInterval方法html中固有方法，这个方法接受两个参数，第一个函数表示执行动画的函数，第二个参数为间隔时间，单位是（毫秒）。
2、用来绘图的函数
1）、通过不断的变换X和Y的坐标来实现动画效果。
2）、在该函数中先用clearRect方法将画布整体或者是局部擦除。
擦除图像clearRect方法：
context.fillRect(x,y,width,height);
x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度。
Convas.js
var context;
var width,height;
var i;
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
setInterval(painting,100);
i = 0;
}
function painting(){
// context.fillStyle = "green";
// context.fillRect(i,i,10,10);
// context.fillRect(400-i,400-i,10,10);
// context.fillRect(400-i,400-i,10,10);
// context.fillRect(0,400-i,10,10);
context.fillStyle = "green";
context.fillRect(0,0,width,height);
context.clearRect(10,10,width,height);
context.fillStyle = "green";
context.fillRect(i,20,10,10);
i=i+20;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【麦子学院】03.web前端开发之html5本地存储、网页留言板、video、audio、HTML5拖放
- 【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍
- 【麦子学院】02.web前端开发之HTML+CSS基础入门
- 【麦子学院】web前端开发之Photoshop切片
- 转WEB前端开发经验总结(3)
- 转WEB前端开发经验总结(4)
- Web前端开发一些有趣的新书
- Web前端开发一些有趣的新书
- Aptana:好用的Web前端开发IDE
- Java EE WEB工程师培训-JDBC+Servlet+JSP整合开发之03.JDBC Statement(2) 推荐
- 转WEB前端开发经验总结(2)
- Web前端开发工程师必备技术列表
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 改变世界的Web前端开发
- 改变世界的Web前端开发
- 转WEB前端开发经验总结(5)
- 建立国内Web前端开发的生态系统
- Aptana:好用的Web前端开发IDE
- WEB前端开发经验总结--WEB标准篇
- 改变世界的Web前端开发