强大的canvas
作者：勤劳的插秧哥 发布日期：2015-04-20 20:49:54
<canvas>
我会告诉你我不仅写了这篇博客还录了视频吗？这里是视频地址 。我会告诉你目前前端进阶最好的qq群是 130977811 吗？群里每周都有视频在线分享。
个人认为<canvas>是h5最重量级的新标签了，现在各种h5小游戏都是基于<canvas>的，它为游戏提供了一个功能强大的画布，可在画布上绘制丰富的内容，同时也催生出很多游戏引擎。现在就简单介绍一下<canvas>的一些基本绘图和图片处理功能：
1.绘制线条
绘图的基本步骤是：先用getContext('2d')获取二维绘图环境上下文，有二维那肯定也有三位了？是的，三维就要用到WebGL了，技术水平有限，今天就不讨论三维了（三围肿么这么耳熟~~！）。然后设置画笔样式，lineWidth画笔宽度，strokeStyle画笔颜色，lineCap线头样式。样式设置完毕后就开始绘图了，首先用moveTo()把一个看不到的光标移动到起点位置，然后lineTo()设定重点，最后stroke()画出线条。
<!DOCTYPE HTML>
<html>
<head>
<meta charset = 'utf-8'>
<title>绘制线条</title>
<style>
body,div{margin:0px;padding:0px;text-align:center}
#canv{
border:2px solid black;
border-radius:4px;
box-shadow:0px 0px 10px black;
-webkit-box-shadow:0px 0px 10px black;
-moz-box-shadow:0px 0px 10px black;
}
</style>
</head>
<body>
<h3>绘制线条</h3>
<canvas id='canv' width='400px' height='300px'>
你若能看到这句话说明你浏览器不支持canvas!
</canvas>
</body>
<script type='text/javascript'>
var canv = document.getElementById('canv');
//获取2d上下文
var ctx = canv.getContext('2d');
//设置样式
ctx.lineWidth = 40;
ctx.strokeStyle = 'red';
ctx.lineCap = 'round'; //butt ,square,round
ctx.beginPath();
//设置起始点
ctx.moveTo(20,20);
ctx.lineTo(200,200);
//开始绘制定义好的路径
ctx.stroke();
</script>
</html>
2.绘制矩形
矩形的绘制步骤同上所述，但有两种绘制类型：实心矩形fillRect(起点x，起点y，长，宽)，空心矩形strokeRect(起点x，起点y，长，宽)。
var canv = document.getElementById('canv');
//获取2d上下文
var ctx = canv.getContext('2d');
//设置样式
ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
//绘制实心矩形
ctx.fillStyle='red';
ctx.fillRect(10,10,100,100);
3.绘制圆形
同样，也分实心和空心，主要用到arc(圆心x,圆心y,半径,其实角度,结束角度*Math.PI/180,顺逆时针);
var canv = document.getElementById('canv');
//获取2d上下文
var ctx = canv.getContext('2d');
//设置样式
ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
/* ctx.beginPath();
//中心点，半径，始末角度，顺逆时针
ctx.arc(200,200,50,0,270*Math.PI/180,false);
ctx.stroke();
*/
//实心
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(200,200,50,0,270*Math.PI/180,false);
ctx.fill();
4.擦除
能破就能立，能绘制就能擦除，用clearRect(起点x，起点y，擦出范围长，擦出范围宽)实现擦除。
//设置样式
ctx.lineWidth = 10;
ctx.fillStyle = 'red';
//绘制矩形
ctx.fillRect(10,10,200,100);
//擦除
ctx.clearRect(30,30,100,50);
5.渐变
可实现两种渐变方式：线性渐变createLinearGradient()，径向渐变createRadialGradient()。
var canv = document.getElementById('canv');
//获取2d上下文
var ctx = canv.getContext('2d');
//径向渐变
var grd=ctx.createRadialGradient(100,100,10,100,100,50);
grd.addColorStop(0.1,'red');
grd.addColorStop(0.8,'blue');
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);
/*
//线性渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0.2,'red');//必须0-1之间的数，代表颜色的渐变权重
grd.addColorStop(0.7,'blue');
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);
*/
6.像素处理：黑白处理，反色处理
原理：先把要处理的图片读取到canvas上，然后遍历每个像素点，更改像素的rgb值即可。
黑白处理：
反色处理：
<body>
<h3>像素处理</h3>
<img src = 'logo.png' id='logo' />
<canvas id='canv' width='800px' height='800px'>
你若能看到这句话说明你浏览器不支持canvas!
</canvas>
</body>
<script type='text/javascript'>
var canv = document.getElementById('canv');
//获取2d上下文
var ctx = canv.getContext('2d');
var image = new Image();
image.src = '01.jpg';
image.onload = function(){
ctx.drawImage(image,0,0);
var imgdata = ctx.getImageData(0,0,250,250);
var pixels = imgdata.data;
/* // 遍历每个像素并对 RGB 值进行取反
for (var i=0, n=pixels.length; i<n; i+= 4){
pixels[i] = 255-pixels[i]; //r
pixels[i+1] = 255-pixels[i+1]; //g
pixels[i+2] = 255-pixels[i+2]; //b
} */
// 遍历每个像素并更改 RGB 值
for (var i=0, n=pixels.length; i<n; i+= 4){
var grayscale = pixels[i]*.3+pixels[i+1]*.59+pixels[i+2]*.11; //灰度处理
pixels[i ] = grayscale; // r
pixels[i+1] = grayscale; // g
pixels[i+2] = grayscale; // b
}
// 在指定位置进行像素重绘
ctx.putImageData(imgdata, 250, 0);
};
</script>
7.小动画
动画原理：先绘制一张图片drawImage(img,x,y,80,80);时刻更改图片的坐标x，y来使图片不断移动。
相关文章
精彩导读
热门资讯
关注我们
