HTML5程序设计 Canvas API
检测浏览器支持情况
<script type="text/javascript">
try
{
document.createElement("Canvas").getContext("2d");
document.getElementById("support").innerHTML = "OK";
}
catch (e)
{
document.getElementById("support").innerHTML = e.message;
}
</script>
加入Canvas
<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/>
对角线
//取得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();
路径
HTML5 Canvas API中的路径代表你希望呈现的任何形状。
beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。
closePath():这个函数行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域，这对将来的填充和描边都非常有用。
绘制一个松树地树冠
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.fillStyle = "#339900";
context.fill();
绘制矩形
我们给树增加树干
context.fillStyle = '#663300';
context.fillRect(-5, -50, 10, 50);
绘制曲线
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();
在Canvas中插入图片
必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片，如果试图在图片未完全加载之前就将其呈现到canvas上，那么 canvas将不会显示任何图片，因此，特别注意，在呈现之前，应确保图片已加载完毕。
// 加载图片 var bark = new Image(); bark.src = "bark.jpg"; // 图片加载完成后，再调用绘图的函数 bark.onload = function () { drawTrails(); }
显示图片：
//用背景图案填充，作为树干的背景 context.drawImage(bark, -5, -50, 10, 50);
渐变
使用渐变需要三个步骤：
(1)创建渐变对象
(2)为渐变对象设置颜色，指明过渡方式
(3)在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, '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();
context.createPattern的第二个参数是重复性标记，可以在表2-1中选择合适的值。
| 平铺方式 | 意义 |
| repeat | (默认值)图片会在两个方向平铺 |
| repeat-x | 横向平铺 |
| repeat-y | 纵向平铺 |
| no-repeat | 图片只显示一次，不平铺 |
缩放
缩放函数context.scale(x,y)：x,y分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放大(或缩小)的量。如果x值为2，就代表所绘制图像中全部元素会变成两倍宽，如果y值为0。5，绘制出来的图像会变成之前的一半高。
// 在 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, 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();
文本
context.fillText(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。
context.strokeText(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。
// 在canvas上绘制文本 context.save(); // 字号为60,字体为Impact context.font = "60px impact"; //填充颜色 context.fillStyle = '#996600'; //居中 context.textAlign = 'center'; //绘制文本 context.fillText('Happy Trails!', 200, 60, 400); context.restore();
阴影
可以通过几种全局context属性来控制阴影
| 属性 | 值 | 备注 |
| shadowColor | 任何CSS中的颜色值 | 可以使用透明度（alpha） |
| shadowOffsetX | 像素值 | 值为正数，向右移动阴影;为负数，向左移动阴影 |
| shadowOffsetY | 像素值 | 值为正数，向下移动阴影;为负数，向上移动阴影 |
| shadowBlur | 高斯模糊值 | 值越大，阴影边缘越模糊 |
// 颜色黑色，20%透明度 context.shadowColor = 'rgba(0, 0, 0, 0.2)'; // 向右移动15px,向左移动10px context.shadowOffsetX = 15; context.shadowOffsetY = -10; // 轻微模糊阴影 context.shadowBlur = 2;
像素数据
context.getImageData(sx, sy, sw, sh)：sx,xy确定一个点，sw:宽度，sh:高度。
这个函数返回三个属性：width 每行有多少个像素 height 每列有多少个像素
data 一堆数组，存有从canvas获取的每个像素的RGBA值（值红、绿、蓝和透明度）。
context.putImageData(imagedata,dx,dy)：允许开发人员传入一组图像数据，dx,dy用来指定偏移量，如果使用，则该函数就会跳到指定的canvas位置去更新
显示传进来的像素数据。
canvas.toDataUrl：可以通过编程获取canvas上当前呈现的数据，获得的数据以文本格式保存，浏览器能将其解析成图像。
