一．SVG(Scalable Vector Graphics,可伸缩矢量图形)和Canvas对比
1.Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG那样可以被放大缩小。
2.用Canvas绘制出的对象不属于页面DOM结构或者任何命名空间——这点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅的缩放，并且支持单击检测（能检测到鼠标点击了图像上的哪个点）。
虽然Canvas有这些不足，但是Canvas API有两方面的优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好。
其次，在其他编程语言现有的优秀二维绘制API的基础上实现Canvas API相对来说比较简单。毕竟，二鸟在林不如一鸟在手。
二．Canvas概述
1.canvas是什么
<canvas></canvas>
默认创建一块矩形区域，宽300，高150像素，可设置border style使其可见。
使用canvas编程，首先要获取其上下文（context）.然后在上下文中执行动作，最后将这些动作应用到上下文中。
2.Canvas坐标
Canvas坐标从左上角开始，x轴水平右延伸，y轴垂直下延伸。左上角坐标为x=0,y=0，称作原点。
3.浏览器支持
检测浏览器支持代码：
try{ document.createElement(“canvas”).getContext(“2d”); document.getElementById(“support”).innerHTML= “HTML5 Canvas is supported in your browser.”; }catch(e){ document.getElementById(“support”).innerHTML= “HTML5 Canvas is not supported in your browser.”; }
不支持时替代内容写法：
<canvas> Update your browser to enjoy canvas! </canvas>
4.在页面中加入canvas
1.画直线
html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/canvas/canvas1.js"></script> </head> <body> <canvas id="diagonal" width="200" height="200" style="border:1px solid;"> update your browser to support canvas </canvas> </body> </html>
Js:
window.addEventListener("load",drawcans,true);
function drawcans() {
var canvs = document.getElementById("diagonal");
var context = canvs.getContext("2d");
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
2.变换
平移，缩放，旋转等
下面的js代码使用translate函数实现上面同样的对角线
function drawDiagonal(){ var canvas = document.getElementById("diagonal"); var context = canvas.getContext("2d"); context.save() ; context.translate(70,140); context.beginPath(); context.moveTo(0,0) ; context.lineTo(70,-70); context.stroke() ; context.restore(); }
3.路径
- moveTo(x,y):不绘制，只是将当前位置移动到新的目标坐标（x,y)。
- lineTo(x,y):不仅将当前位置移动到新坐标（x,y）,而且在两个坐标之间画一条直线。
简而言之，上面两个函数的区别在于，moveTo就像是提起画笔，移动到新位置，而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。不过，提醒大家，不管调用那个，都不会真正画出图形，因为还没有调用stroke或者fill函数。目前只是在定义路径的位置，以便后面绘制时使用。
closePath会将起始坐标自动作为目标坐标，和lineTo很像。还会通知canvas当前的图形已经闭合或者形成了完全封闭的区域，这对将来填充和描边非常有用。
context.beginPath(); context.moveTo(-25,-50); context.lineTo(-10,-80); context.lineTo(-20,-80); context.lineTo(-5,-110); context.lineTo(-15,-110); context.lineTo(0,-140); context.lineTo(15,-110); context.lineTo(5,-110); context.lineTo(20,-80); context.lineTo(10,-80); context.lineTo(25,-50); context.closePath() ;
以上js代码可以绘制出一个松树的树冠。
4.描边样式
//设置使用描边样式 //加宽线条 context.lineWidth=4; //平滑路径接合点 context.lineJoin = 'round'; //将颜色改成棕色 context.strokeStyle='#663300'; //最后绘制树冠 context.stroke();
5.填充样式
//填充树颜色为绿色 context.fillStyle="#339900"; context.fill();
6.填充矩形区域
//将填充色设为棕色 context.fillStyle=’#663300’; //填充用作树干的矩形区域 context.fillRect(-5,-50,10,50);
7.绘制曲线
context.save(); context.translate(-10,350); context.beginPath(); //第一条曲线向右上方弯曲 context.moveTo(0,0); context.quadraticCurveTo(170,-50,260,-190); //第二条曲线向右下方弯曲 context.quadraticCurveTo(310,-250,410,-250); //使用棕色的粗线条来挥之路径 context.strokeStyle="#663300"; context.lineWidth=20; context.stroke(); context.restore();
8.在canvas中插入图片
//保证图片加载完才调用 var Bark = new Image(); Bark.src=”bark.jpg”; Bark.onload = function(){ drawTrails(); }
在canvas中显示图像
context.drawImage(Bark,-5,-50,10,50);
9.渐变
步骤：
① 创建渐变对象
② 为渐变对象设置颜色，指明过度方式
③ 在context上为填充样式或者描边样式设置渐变
var trunkGradient = context.createLinearGradient(-5,-50,5,-50); trunkGradient.addColorStop(0,'#663300'); trunkGradient.addColorStop(0.4,'#996600'); trunkGradient.addColorStop(1,'#552200'); context.fillStyle=trunkGradient; context.fillRect(-5,-50,10,50); //接下来，创建垂直渐变，以用作树冠在树干上的投影 var canopyShadow = context.createLinearGradient(0,-50,0,0); canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); //方向垂直向下，渐变色在很短的距离内迅速渐变为完全透明，这段长度之外的树干上没有投影 canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)'); //在树干上填充投影渐变 context.fillStyle=canopyShadow; context.fillRect(-5,-50,10,50);
10.背景图
使用createPattern函数替代之前的drawImage函数
var Bark = new Image(); Bark.src=”bark.jpg”; Bark.onload = function(){ drawTrails(); } //用背景图替代棕色的粗线条 context.strokeStyle = context.createPattern(Bark,’repeat’); context.lineWidth=20; Context.stroke();
11.缩放canvas对象
//在（130,250）的位置绘制第一棵树 context.save(); context.translate(130,250); drawTree(context); context.restore(); //在（260,500）的位置绘制第二棵树 context.save(); context.translate(260,500); //将第二棵树的宽高分别放大至原来的2倍 context.scale(2,2); drawTree(context); context.restore();
12.Canvas变换
context.save(); //X值随着Y值的增加而增加，借助拉伸变换，可以创建一颗用作阴影的倾斜的数，应用了变换以后，所有坐标都与矩阵相乘 context.transform(1,0,-0.5,1,0,0); //在Y轴方向，将阴影的高度压缩为原来的60% context.scale(1,0.6); //使用透明度为20%的黑色填充树干 context.fillStyle='rgba(0,0,0,0.2)'; context.fillRect(-5,-50,10,50); //使用已有的阴影效果重新绘制树 createCanopyPath(context); context.fill(); context.restore();
运用上面的所有变换后的图形：
13.canvas文本
Context对象的文本绘制功能由两个函数组成：
- fillText(text,x,y,maxwidth);
- strokeText(text,x,y,maxwidth);
Maxwidth是可选的，用于限制字体的大小，它将文字强制收缩到指定尺寸。
//在canvas上绘制标题文本 context.save(); context.font='60px impact'; //将文本填充为棕色 context.fillStyle='#996600'; //将文本设为居中对齐 context.textAlign='center'; //在canvas顶部中央的位置以大字体的样式显示文本 context.fillText('Merry Christmas!',200,60,400); context.restore();
最后显示如下，是不是很欢快的感觉，绘制的还是很不错的。
14.应用阴影
//设置文字阴影的颜色为黑色，透明度为20% context.shadowColor ='rgba(0,0,0,0.2)'; //将阴影向右移动15px,向上移动10px context.shadowOffsetX=15; context.shadowOffsetY = -10; //轻微模糊阴影 context.shadowBlur=2;
最终效果图：
三.完整代码
JS:
window.addEventListener("load",drawTrails,true);
//绘制松树树冠
function createCanopyPath(context){
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath() ;
}
function drawTrails(){
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//在（130,250）的位置绘制第一棵树
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
context.save();
context.translate(-10,350);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//第二条曲线向右下方弯曲
context.quadraticCurveTo(310,-250,410,-250);
//使用棕色的粗线条来挥之路径
context.strokeStyle="#663300";
context.lineWidth=20;
context.stroke();
context.restore();
//在（260,500）的位置绘制第二棵树
context.save();
context.translate(260,500);
//将第二棵树的宽高分别放大至原来的2倍
context.scale(2,2);
drawTree(context);
context.restore();
//在canvas上绘制标题文本
context.save();
context.font='60px impact';
//将文本填充为棕色
context.fillStyle='#996600';
//将文本设为居中对齐
context.textAlign='center';
//在canvas顶部中央的位置以大字体的样式显示文本
//设置文字阴影的颜色为黑色，透明度为20%
context.shadowColor ='rgba(0,0,0,0.2)';
//将阴影向右移动15px,向上移动10px
context.shadowOffsetX=15;
context.shadowOffsetY = -10;
//轻微模糊阴影
context.shadowBlur=2;
context.fillText('Merry Christmas!',200,60,400);
context.restore();
}
function drawTree(context){
context.save();
var trunkGradient = context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
//接下来，创建垂直渐变，以用作树冠在树干上的投影
var canopyShadow = context.createLinearGradient(0,-50,0,0);
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
//方向垂直向下，渐变色在很短的距离内迅速渐变为完全透明，这段长度之外的树干上没有投影
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');
//在树干上填充投影渐变
context.fillStyle=canopyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.restore() ;
context.save();
//设置使用描边样式
context.lineWidth=4;
context.lineJoin = 'round';
context.strokeStyle='#663300';
context.stroke();
//填充数颜色
context.fillStyle="#339900";
context.fill();
context.restore();
context.save();
//X值随着Y值的增加而增加，借助拉伸变换，可以创建一颗用作阴影的倾斜的数，应用了变换以后，所有坐标都与矩阵相乘
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向，将阴影的高度压缩为原来的60%
context.scale(1,0.6);
//使用透明度为20%的黑色填充树干
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
//使用已有的阴影效果重新绘制树
createCanopyPath(context);
context.fill();
context.restore();
}
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/canvas/canvas1.js"></script> </head> <body> <canvas id="diagonal" width="410" height="510" style="border:1px solid;"> update your browser to support canvas </canvas> </body> </html>