点击关注▲一灯科技
知识 | 经验| 资讯 | 资料 四大版块
中国专业的Web前端高端培训机构
原文作者：Iris_mao（简书作者）
原文链接：http://www.jianshu.com/p/a6436969859d
Canvas API
在网页上使用cnavas元素时，会创建一块矩形区域，默认大小是300*150px
坐标从左上角开始的，x轴沿着水平方向向右延伸，y轴垂直方向向下延伸
检测浏览器对canvas的支持情况:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Canvas API</title>
</head>
<body>
<div id="support"></div>
</body>
<script>
try{
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML="HTML5Canvas is supported in you browser.";
}catch (e){
document.getElementById("support").innerHTML="HTML5Canvas is not supported in you browser.";
}
</script>
</html>
绘制简单的对角线：(对上下文的操作不会立即反应在页面上，只有对路径应用绘制（stroke）或填充（fill）方法时，结果才会显示出来)
以直接绘制的方式来绘制
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>CanvasAPI</title>
</head>
<body>
<canvasid="diagonal" style="border: 1px solid;"height="200" width="200"></canvas>
</body>
<script>
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas =document.getElementById('diagonal');
var context =canvas.getContext('2d');
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();
}
window.addEventListener("load",drawDiagonal,true);
</script>
</html>
以转换的方法进行绘制(translate() 方法重新映射画布上的 (0,0) 位置。)
//保存你当前绘图状态
context.save();
//向右下方移动绘图上下文
context.translate(70,140);
//以原点为起点，绘制与前面相同的线段
context.beginPath();
context.moveTo(0,0);
context.lineTo(70,-70);
context.stroke();
//恢复原有的绘图状态
context.restore();
下面以绘制带树的跑道为例，写一段完成的程序
html部分代码
<canvas id="trails" style="border: 1px solid;"height="500" width="400"></canvas>
JS部分代码
//加载砾石背景图片
var gravel = new Image();
gravel.src ="gravel.jpg";
gravel.onload = function () {
drawTrails();
};
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 drawTree(context) {
//给树创建树影
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();
//恢复之前的canvas状态
context.restore();
createCanopyPath(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);
//投影渐变的起点是透明度设为50%的黑色
canopyShadow.addColorStop(0.2,'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);
//加宽线条
context.lineWidth = 4;
//平滑路径的接合点 round/bevel/miter
context.lineJoin = 'round';
//将颜色改为棕色
context.strokeStyle = '#663300';
context.stroke();
//将填充色设置为绿色并填充树冠(填充是在绘图之前进行的，所以不会覆盖线条宽度，如果在绘图之后填充，就会覆盖线条宽度)
context.fillStyle ="#339900";
context.fill();
}
function createCurvePath(context){
//保存canvas的状态并绘制路径
context.save();
context.translate(-10, 350);
context.beginPath();
//第一条曲线向右上方弯曲(第一组xy坐标是曲线的控制点，第二组xy坐标是曲线的终点)
context.moveTo(0, 0);
context.quadraticCurveTo(170,-50, 260, -190);
//第二条曲线向右下方弯曲
context.quadraticCurveTo(310,-250, 410, -250);
//用背景图替代棕色粗线条
context.strokeStyle =context.createPattern(gravel, 'repeat');
//使用棕色的粗线条来绘制路径
// context.strokeStyle='#663300';
context.lineWidth = 20;
context.stroke();
//恢复之前的canvas状态
context.restore();
}
function drawTrails() {
var canvas =document.getElementById('trails');
var context =canvas.getContext('2d');
//在（130，250）的位置绘制第一颗树
context.save();
context.translate(130, 250);
drawTree(context);
//绘制当前路径
// context.stroke();
context.restore();
//在（260，500）的位置绘制第二颗树
context.save();
context.translate(260, 500);
//第二颗树的宽高分别放大至原来的2倍
context.scale(2, 2);
drawTree(context);
context.restore();
//绘制小路
createCurvePath(context);
//在canvas上绘制标题文本
context.save();
//字号为60px,字体为impact
context.font = "60pximpact";
//将文本填充为棕色
context.fillStyle = '#996600';
//将文本设置为居中对齐
context.textAlign = 'center';
//设置文字阴影的颜色为黑色，透明度为20%
context.shadowColor ='rgba(0,0,0,0.2)';
//将阴影向右移动15px，向上移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
//轻微模糊阴影
context.shadowBlur = 2;
//在canvas顶部中央的位置以大字体的形式显示文本
context.fillText('HappyTrails!', 200, 60, 400);
context.restore();
}
附示例程序中用到的图片
gravel.jpg
程序技术点分解：
树冠的绘制是通过moveTo lineTo的方法，在原点进行绘制，然后用translate方法移动位置
样式的修改：lineWidth（线宽） lineJoin（连接点的平滑度） strokeStyle（颜色） lineCap（线条末端）
曲线的绘制用quadraticCurveTo方法，第一组参数是弯曲点，第二组参数是终点
渐变的制作分三步：1、创建渐变对象 trunkGradient
2、为渐对象设置颜色，指明过渡方式 addColorStop
3、在context上为填充样式或描边样式设置渐变 fillStyle
4、rgba(R,G,B,A)，最后一个是Alph通道透明度
背景图的添加用 createPattern(img,'repeat/repeat-x/repear-y/no-repeat')
缩放 scale
制作阴影 transfom(a,b,c,d,e,f) 要了解矩阵的概念
Canvas文本 fillText strokeText
应用阴影：shadowColor（颜色） shadowOffsetX（向右阴影像素值）shadowOffsetY（向下阴影像素值） shadowBlur（模糊值）
文章评论