canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(2)

规范规定，在未指定返回图片类型时，返回的图片格式必须为 PNG 格式，如果 canvas 没有任何像素，则返回值为： "data:," ，这是最短的data:URL，

在 text/plain 资源中表现为空字符串。type 的可以在 image/png， image/jpeg,image/svg+xml 等 MIME 类型中选择。如果是 image/jpeg，可以有第二个参数，如果第二个参数的值在 0-1 之间，则表示 JPEG 的质量等级，

否则使用浏览器内置默认质量等级。

下面的代码可以从 ID 为 codeex 的 canvas 中取得绘制内容，并作为 DataURL 传递给 img 元素，并显示。

var canvas = document.getElementById('codeex');

var url = canvas.toDataURL();

//id 为 myimg 的图片元素

myimg.src = url;

12.3二维绘图上下文

当使用一个 canvas 元素的 getContext("2d")方法时，返回的是

CanvasRenderingContext2D 对象，其内部表现为笛卡尔平面坐标，并且左上

角坐标为(0,0)，在本平面中往右则 x 坐标增加和往下方 y 坐标增加。每一

个 canvas 元素仅有一个上下文对象。

12.3.1Canvas 的状态

每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容：

· 当前的 transformation matrix.

· 当前的 clipping region

· 当前的属性值：fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineJoin,

lineWidth, miterLimit, shadowBlur, shadowColor,

shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,textBaseline

注：当前 path 和当前 bitmap 不是绘图状态的一部分，当前 path 是

持久存在的，仅能被 beginPath()复位，当前 bitmap 是 canvas 的属性，

而非绘图上下文。

context . restore () //弹出堆最上面保存的绘图状态

context . save () //在绘图状态堆上保存当前绘图状态

绘图状态可以看作当前画面应用的所有样式和变形的一个快照。而状态

的应用则可以避免绘图代码的过度膨胀。

12.3.2转换(Transformations)

在做转换 / 变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。

context . rotate ( angle ) // 按给定的弧度旋转, 按顺时针旋转 rotate 方法旋转的中心始终是 canvas 的原点，如果要改变它，需要使

用 translate 方法。

context . scale ( x , y ) // 按给定的缩放倍率缩放，1.0, 为不变参数比 1.0 小表示缩小，否则表示放大。默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-2.html