程序设计HTML5 Canvas API 突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述html5中几个不容错过的api或者tips小结HTML5中5个简单实用的APIHTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电5 个强大的HTML5 API 函数推荐

//取得Canvas元素及其绘图上下文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘制到Canvas上
context.stroke();

//取得Canvas元素及其绘图上下文
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();

function createCanopyPath(context) {
// Draw the tree canopy
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');

context.save();
context.translate(130, 250);

// 创建表现树冠的路径
createCanopyPath(context);

// 绘制当前路径
context.stroke();
context.restore();
}

window.addEventListener("load", drawTrails, true);

//加宽线条
context.lineWidth = 4;
//平滑路径的接合点
context.lineJoin = 'round';
//颜色
context.strokeStyle = '#663300';
// 绘制当前路径
context.stroke();

context.save();
context.translate(-10, 350);
context.beginPath();

// 第一条曲线向右上方弯曲
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);

// 向右下方弯曲
context.quadraticCurveTo(310, -250, 410, -250);

// Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();

// Restore the previous canvas state
context.restore();

// 加载图片
var bark = new Image();
bark.src = "bark.jpg";

// 图片加载完成后，再调用绘图的函数
bark.onload = function () {
drawTrails();
}

// 创建用作树干纹理的三阶水平渐变
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, '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);

// 加载图片
var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}

// 用背景图替代棕色粗线条
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();

// 在 X=130, Y=250 处绘制第一棵树
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();

// 在 X=260, Y=500 处绘制第二棵树
context.save();
context.translate(260, 500);

// 将第二棵树的高宽放大到原来的2倍
context.scale(2, 2);
drawTree(context);
context.restore();

context.save();
//旋转角度参数以弧度为单位
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

// 保存当前状态
context.save();

// X值随着Y值增加而增加，借助拉伸变换，
// 可以创建一棵用作阴影的倾斜的树
// 应用了变换以后，所有坐标都与矩阵相乘
context.transform(1, 0,
-0.5, 1,
, 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();

// 在canvas上绘制文本
context.save();

// 字号为60,字体为Impact
context.font = "60px impact";

//填充颜色
context.fillStyle = '#996600';
//居中
context.textAlign = 'center';

//绘制文本
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

// 颜色黑色，20%透明度
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// 向右移动15px,向左移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// 轻微模糊阴影
context.shadowBlur = 2;