HTML高级篇-canvas.ppt

* * * * * * CanvasRenderingContext2D 对象的所有属性（除了画布的属性是一个常量）都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分，但是当前路径和当前点并不是。 * E:\东软教学资料\HTML5\exercises\drawShapes.html Translate方法 语法：translate(x,y); 功能：转换画布的用户坐标系统，为画布的变换矩阵添加水平的和垂直的偏移。 实例：translate方法的应用。 var cxt=document.getElementById(canvas) .getContext(2d); cxt.translate(50,50); cxt.strokeStyle=green; cxt.strokeRect(0,0,50,50); 此时的坐标(0,0)实际上是(50,50)。 save、restore方法 save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用?restore()?来恢复以前的值。 restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。 实例：save()的应用。 var cxt=document.getElementById(canvas).getContext(2d); //绘制绿色直线 cxt.beginPath(); cxt.moveTo(100,50); cxt.lineTo(100,100); cxt.strokeStyle=green; cxt.stroke(); cxt.save(); //绘制红色直线 cxt.beginPath(); cxt.moveTo(200,50); cxt.lineTo(200,100); cxt.strokeStyle=red; cxt.restore(); cxt.stroke(); 图1： 实例：分析结果。 第8行的save方法保存了画布中此时的画笔状态，即strokeStyle的属性值“green”。 第14行的restore方法恢复了之前的画笔状态，即画笔的green颜色。覆盖了第14行画笔的red值。 因而绘制出2条绿色直线。 实例：save()restroe()。 var cxt=document.getElementById(canvas).getContext(2d); cxt.save(); //绘制绿色直线 cxt.beginPath(); cxt.rotate(30*Math.PI/180); cxt.moveTo(100,50); cxt.lineTo(100,100); cxt.strokeStyle=green; cxt.stroke(); //绘制红色直线 cxt.beginPath(); cxt.restore(); cxt.moveTo(200,50); cxt.lineTo(200,100); cxt.strokeStyle=red; cxt.stroke(); 结果分析： Save()保存了画布的变换矩阵。 练习：画出如下图形。 * * * 注意：当定义画布尺寸时，最好通过HTML设置它的width和height特性，因为通过CSS设置宽高会导致画布按比例缩放到你设置的值，这背后有它的逻辑原因：在canvas元素的内部存在一个名为2d渲染环境（2d redering context）的对象，所以，通过CSS设置画布尺寸会引起奇怪的效果。 * * * * * fillStyle和strokeStyle都支持普通CSS颜色值，这意味着你可以使用RGB、RGBA、HSA、颜色名称以及十六进制颜色值。 * * * * * * * * 在上面这张图中，左边的图形在每次绘制矩形前都调用了一次?beginPath?来清除之前的路径并重新开始绘制新的路径，而后面的图形则就只在绘制所有图形前调用了一次?beginPath?来清除路径，因此，右边的图形颜色比左边的深一些，因为每次使用?stroke?绘制边框时，会把之前的路径再次绘制一遍，叠加起来颜色就比原来深一些。 * 除非有特殊需要，每次开始绘制路径前都要调用?beginPath?来开始新路径。 * * * * * * 这个例子演示了如何画一个比原图小的图像，一个不同长宽比的图像和一个比原图大的图像的方法。? * * HTML5移动开发 ——Canva