接上一篇：【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面
导航
【初探HTML5之使用新标签布局】用html5布局我的博客页！
【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面
【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面
【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？
【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦
【HTML5初探之Geolocation API】让我们来回去地理信息
绘制渐变图形
fillStyle除了指定颜色外，还可以指定填充对象。 绘制线性渐变时，需要用到LinearGradient对象，创建函数为： createLinearGradient(xStart, yStart, xEnd, yEnd)； xStart为渐变起始横坐标 yStart为渐变起始纵坐标 xEnd为渐变结束横坐标 yEnd为渐变结束纵坐标 通过该方法可以创建一个使用两个坐标点的LinearGradient对象。 而后在通过addColorStop进行颜色设定： addColorStop(offset, color) offset为所设定颜色离开起始点的偏移量（0,1之间） color为指定的颜色。 因为是渐变至少需要使用两次addColorStop方法。 最后将fillStyle设定为LinearGradient对象执行填充变可绘制图形了。
绘制渐变图形
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 div 7 { 8 position: absolute; 9 width: 1px; 10 height: 1px; 11 line-height: 1px; 12 } 13 </style> 14 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 15 <script type="text/javascript"> 16 //x2 + y2 = r2; 17 $(document).ready(function () { 18 //先画x，y 19 var canvas = $('#canvas')[0]; 20 var ctx = canvas.getContext('2d'); 21 22 //#99d9ea 23 var g1 = ctx.createLinearGradient(0, 0, 0, 300); 24 g1.addColorStop(0, 'gray'); 25 g1.addColorStop(1, '#99d9ea'); 26 ctx.fillStyle = g1; 27 ctx.fillRect(0, 0, 400, 300); 28 29 }); 30 31 </script> 32 </head> 33 <body> 34 <canvas id="canvas" width="400" height="300"> 35 </canvas> 36 </body> 37 </html>
绘制径向渐变
径向渐变：沿着圆形的方向向外进行扩散渐变，比如沿着太阳半径方向扩散出去的光晕。
createRediaGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
radiusStart与radiusStart分别代表开始圆的半径与结束圆的半径
径向渐变
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 //x2 + y2 = r2; 8 $(document).ready(function () { 9 //先画x，y 10 var canvas = $('#canvas')[0]; 11 var ctx = canvas.getContext('2d'); 12 13 //#99d9ea 14 var g1 = ctx.createRadialGradient(400, 0, 0, 400, 0, 400); 15 g1.addColorStop(0.1, 'gray'); 16 g1.addColorStop(0.5, 'red'); 17 g1.addColorStop(1, '#99d9ea'); 18 ctx.fillStyle = g1; 19 ctx.fillRect(0, 0, 400, 300); 20 21 }); 22 23 </script> 24 </head> 25 <body> 26 <canvas id="canvas" width="400" height="300"> 27 </canvas> 28 </body> 29 </html>
绘制变形图形
我们有时会遇到这么一个功能：旋转相册、放大照片，这里就介绍如何变形图形：
translate(x, y)用于移动坐标轴原点，默认在左上角
scale(x, y)用于将图形放大，xy分别是各自坐标轴放大的倍数
rotate(angle)用于旋转图形，angle为角度值
平移扩大旋转图形
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 //x2 + y2 = r2; 8 $(document).ready(function () { 9 //先画x，y 10 var canvas = $('#canvas')[0]; 11 var ctx = canvas.getContext('2d'); 12 ctx.fillStyle = '#99d9ea'; 13 ctx.fillRect(0, 0, 400, 300); 14 15 ctx.fillStyle = 'red'; 16 ctx.fillRect(10, 10, 50, 50); 17 18 ctx.translate(60, 60);//原点平移 19 ctx.fillRect(0, 0, 50, 50); 20 21 ctx.translate(60, 60); //原点平移 22 ctx.scale(1.5, 1.2); //放大 23 ctx.fillRect(0, 0, 50, 50); 24 25 ctx.translate(60, 60); //原点平移 26 ctx.rotate(Math.PI / 10); //旋转 27 ctx.fillRect(0, 0, 50, 50); 28 29 }); 30 31 </script> 32 </head> 33 <body> 34 <canvas id="canvas" width="400" height="300"> 35 </canvas> 36 </body> 37 </html>
矩阵变换
变换矩阵：专门用来实现图形变形，与坐标配合使用，达到变形的目的。
transform(m11, m12, m21, m22, dz, dy)方法可修改变换矩阵
该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算
m参数用以修改使用这个方法后，绘制图形的计算方法，以达到变形的目的；
dx与dy分别表示将坐标原点在各自坐标上移动对应单位
PS：这块我也看得模模糊糊的，据说需要掌握矩阵相关知识，我这里简述便是
这块知识点，我没有搞明白，暂时不描述了。
图形组合
多个图形之间可能发生重合。后出现的会遮盖先出现的，有时我们想在上面做点操作，这里变提供了一个globalCompositeOperation属性决定图形组合方式。
该属性文字很多，我这里直接上测试代码了：
图形组合
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 //x2 + y2 = r2; 8 $(document).ready(function () { 9 //先画x，y 10 var canvas = $('#canvas')[0]; 11 var ctx = canvas.getContext('2d'); 12 13 ctx.fillStyle = 'blue'; 14 ctx.fillRect(10, 10, 60, 60); 15 ctx.globalCompositeOperation = 'xor';//lighter 16 ctx.beginPath(); 17 ctx.fillStyle = 'red'; 18 ctx.arc(60, 60, 30, 0, Math.PI * 2); 19 ctx.fill(); 20 21 }); 22 23 </script> 24 </head> 25 <body> 26 <canvas id="canvas" width="400" height="300"> 27 </canvas> 28 </body> 29 </html>
绘制阴影
绘制阴影只需设定以下属性：
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur 阴影模糊范围
我是一个阴影
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 //x2 + y2 = r2; 8 $(document).ready(function () { 9 //先画x，y 10 var canvas = $('#canvas')[0]; 11 var ctx = canvas.getContext('2d'); 12 13 ctx.fillStyle = 'blue'; 14 ctx.shadowOffsetX = 10; 15 ctx.shadowOffsetY = 10; 16 ctx.shadowColor = 'red'; 17 ctx.shadowBlur = 7.5; 18 19 ctx.fillRect(10, 10, 60, 60); 20 21 }); 22 23 </script> 24 </head> 25 <body> 26 <canvas id="canvas" width="400" height="300"> 27 </canvas> 28 </body> 29 </html>
使用图像
绘制图像有以下几个方法：
drawImage(img, x, y)
drawImage(img, x, y, w, h)
drawImage(img, sx, sy, sw, sh, dz, dy, dw, dh)
前两个函数都很好理解，第三个我第一眼是没有看懂的：
sx\sy 分别代表源图像被复制区域在画布起始横坐标纵坐标
sw\sh 表示被复制被复制区域的高宽（即做图像局部复制）
dx\dy 表示被复制后的图像在画布上的位置
dw\dh 表示最后的高宽
第一个和第二个就是是否缩放的差距：
上一张我的果照
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 draw(); 9 10 }); 11 function draw() { 12 //获取canvas对象 13 var canvas = document.getElementById('canvas'); 14 if (canvas == null) { 15 return false; 16 } 17 var ctx = canvas.getContext('2d'); 18 ctx.fillStyle = '#99d9ea'; 19 ctx.fillRect(0, 0, 400, 300); //填充画布结束 20 21 var img = new Image(); 22 img.src = 'yexiaochai.jpg'; 23 img.onload = function () { 24 ctx.drawImage(img, 10, 10, 400, 300); 25 }; 26 } 27 28 29 </script> 30 </head> 31 <body> 32 <canvas id="canvas" width=400 height="300" > 33 </canvas> 34 <br /> 35 </body> 36 </html>
指定高宽与不指定的区别。
第三个函数的使用，局部放大或者剪切的效果，只需要调整高宽缩放
局部剪切
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 draw(); 9 10 }); 11 function draw() { 12 //获取canvas对象 13 var canvas = document.getElementById('canvas'); 14 if (canvas == null) { 15 return false; 16 } 17 var ctx = canvas.getContext('2d'); 18 ctx.fillStyle = '#99d9ea'; 19 ctx.fillRect(0, 0, 1200, 600); //填充画布结束 20 21 var img = new Image(); 22 img.src = 'yexiaochai.jpg'; 23 img.onload = function () { 24 ctx.drawImage(img, 0, 0); 25 26 ctx.drawImage(img, 200, 0, 160, 150, 400, 0, 160, 150); 27 }; 28 } 29 30 31 </script> 32 </head> 33 <body> 34 <canvas id="canvas" width=1200 height="600" > 35 </canvas> 36 <br /> 37 </body> 38 </html>
图像剪切
刚刚那个剪切还是水的，接下来才是真正的剪切。。。
圆形裁剪
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 draw(); 9 10 }); 11 function draw() { 12 //获取canvas对象 13 var canvas = document.getElementById('canvas'); 14 if (canvas == null) { 15 return false; 16 } 17 var ctx = canvas.getContext('2d'); 18 ctx.fillStyle = '#99d9ea'; 19 ctx.fillRect(0, 0, 500, 500); //填充画布结束 20 21 var img = new Image(); 22 img.src = 'yexiaochai.jpg'; 23 img.onload = function () { 24 ctx.beginPath(); 25 ctx.fillStyle = 'red'; 26 ctx.arc(250, 100, 100, 0, Math.PI * 2); 27 ctx.fill(); 28 ctx.clip(); 29 ctx.drawImage(img, 0, 0); 30 }; 31 } 32 33 34 </script> 35 </head> 36 <body> 37 <canvas id="canvas" width=500 height="500" > 38 </canvas> 39 <br /> 40 </body> 41 </html>
像素处理
Canvas api可以获取图像的每一个像素，并得到像素的rgb，使用函数为：
getImageData(sx, sy, sw, sh)
简单举个例子吧：
View Code
1 1 <!DOCTYPE html> 2 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 3 <head> 4 4 <title></title> 5 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 6 <script type="text/javascript"> 7 7 $(document).ready(function () { 8 8 draw(); 9 9 10 10 }); 11 11 function draw() { 12 12 //获取canvas对象 13 13 var canvas = document.getElementById('canvas'); 14 14 if (canvas == null) { 15 15 return false; 16 16 } 17 17 var ctx = canvas.getContext('2d'); 18 18 ctx.fillStyle = '#99d9ea'; 19 19 ctx.fillRect(0, 0, 500, 500); //填充画布结束 20 20 21 21 var img = new Image(); 22 22 img.src = 'yexiaochai.jpg'; 23 23 img.onload = function () { 24 24 ctx.drawImage(img, 0, 0); 25 25 var imgData = ctx.getImageData(0, 0, 200, 200); 26 26 for (var i = 0, len = imgData.data.length; i < len; i += 4) { 27 27 imgData.data[i + 0] = 255 - imgData.data[i + 0]; 28 28 imgData.data[i + 1] = 255 - imgData.data[i + 2]; 29 29 imgData.data[i + 2] = 255 - imgData.data[i + 1]; 30 30 } 31 31 ctx.putImageData(imgData, 0, 0); 32 32 }; 33 33 } 34 34 35 35 36 36 </script> 37 37 </head> 38 38 <body> 39 39 <canvas id="canvas" width=500 height="500" > 40 40 </canvas> 41 41 <br /> 42 42 </body> 43 43 </html>
绘制文字
绘制带阴影的文字
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 draw(); 9 10 }); 11 function draw() { 12 //获取canvas对象 13 var canvas = document.getElementById('canvas'); 14 if (canvas == null) { 15 return false; 16 } 17 var ctx = canvas.getContext('2d'); 18 ctx.fillStyle = 'black'; 19 ctx.font = 'bold 30px sans-serif'; 20 ctx.shadowOffsetX = 4; 21 ctx.shadowOffsetY = 4; 22 ctx.shadowColor = 'gray'; 23 ctx.shadowBlur = 7.5; 24 ctx.fillText('刀狂剑痴叶小钗', 10, 100); 25 } 26 </script> 27 </head> 28 <body> 29 <canvas id="canvas" width=500 height="500" > 30 </canvas> 31 <br /> 32 </body> 33 </html>
保存与恢复状态
我们在图像剪切时有个问题，如果操作结束还想继续绘制，又不取消裁剪范围的话，急需要用到状态保存与恢复了。
api提供save与restore完成相关功能
其分别用于保存与恢复图形上下文的绘图状态。
文件保存
我们画了很多图形，但是该如何保存呢？
保存为本地文件
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 draw(); 9 10 }); 11 function draw() { 12 //获取canvas对象 13 var canvas = document.getElementById('canvas'); 14 if (canvas == null) { 15 return false; 16 } 17 var ctx = canvas.getContext('2d'); 18 ctx.fillStyle = 'black'; 19 ctx.font = 'bold 30px sans-serif'; 20 ctx.shadowOffsetX = 4; 21 ctx.shadowOffsetY = 4; 22 ctx.shadowColor = 'gray'; 23 ctx.shadowBlur = 7.5; 24 ctx.fillText('刀狂剑痴叶小钗', 10, 100); 25 window.location = canvas.toDataURL('image/jpeg'); 26 27 } 28 </script> 29 </head> 30 <body> 31 <canvas id="canvas" width=500 height="500" > 32 </canvas> 33 <br /> 34 </body> 35 </html>
我只想说，你好黑啊。。。。
简单的动画制作
学到这里，我突然开光了，我突然知道我最近在干什么了！！！
动画制作，使用这个东西可以动画制作，换句话说，做游戏可以用它来了哇？？？如此一来我突然就感觉这个东西着实改变了前端啊！！！
所谓动画就是不断的檫除重绘的过程
移动的矩形
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 var canvas = document.getElementById('canvas'); 9 if (canvas == null) { 10 return false; 11 } 12 var ctx = canvas.getContext('2d'); 13 14 draw(ctx, canvas); 15 16 }); 17 function draw(ctx, canvas) { 18 //获取canvas对象 19 20 ctx.fillStyle = 'black'; 21 var width = canvas.width; 22 var height = canvas.height; 23 var step = 0; 24 setInterval(function () { 25 ctx.clearRect(0, 0, width, height); 26 ctx.fillStyle = 'red'; 27 ctx.fillRect(step, 0, 20, 20); 28 step += 20; 29 }, 100); 30 31 32 } 33 </script> 34 </head> 35 <body> 36 <canvas id="canvas" width=500 height="500" > 37 </canvas> 38 <br /> 39 </body> 40 </html>
该矩形会由左至右的运动。。。。
结语
就个人来说，Canvas这章估计是HTML5中比较枯燥的东西了，我学习过程中就不太提得起劲，完了里面很多图形都是要有一定数学知识的。
然后这章的函数之多，完了我猜不要多久我又会忘记。
但是：这章类容应该是相当重要的，因为最后制作动画时，我突然感觉是不是游戏就是需要他呢？？？于是马上去查了下资料：
于是老夫找到了此篇文章，才感觉到其真正用途，看来以后该知识点必须牢牢掌握好好运用啊！！！！
