包头网页设计-高端网站设计公司

包头网页设计-高端网站设计公司

1. erif。

2. textAlign = value 文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。

3. textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。

4. direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

---

七、绘制图片

我们也可以在 canvas 上直接绘制图片。

7.1 由零开始创建图片

var img = new Image();   // 创建一个<img>元素img.src = 'myImage.png'; // 设置图片源地址

脚本执行后图片开始装载。

绘制 img

// 参数 1：要绘制的 img  // 参数 2、3：绘制的 img 在 canvas 中的坐标ctx.drawImage(img,0,0);

注意：考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。

var img = new Image();   // 创建img元素img.onload = function(){    ctx.drawImage(img, 0, 0)}img.src = 'myImage.png'; // 设置图片源地址

7.2 绘制 img 标签元素中的图片

img 可以 new 也可以来源于我们页面的 <img>标签。

<img src="./美女.jpg" alt="" width="300"><br> <canvas id="tutorial" width="600" height="400"></canvas>function draw(){    var canvas = document.getElementById('tutorial');    if (!canvas.getContext) return;    var ctx = canvas.getContext("2d");    var img = document.querySelector("img");    ctx.drawImage(img, 0, 0);}document.querySelector("img").onclick = function (){    draw();}

第一张图片就是页面中的 <img> 标签：

八、状态的保存和恢复

Saving and restoring state 是绘制复杂图形时必不可少的操作。

save() 和 restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

1、关于 save() ：Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

一个绘画状态包括：

当前应用的变形（即移动，旋转和缩放）

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

当前的裁切路径（clipping path）

可以调用任意多次 save方法(类似数组的 push())。

可以调用任意多次 save方法(类似数组的push())。

2、关于restore()：每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())。

var ctx;

function draw(){

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

    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");

    ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形

    ctx.save();                  // 保存默认状态

    ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变

    ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

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

    ctx.fillStyle = '#FFF'       // 再次改变颜色配置

    ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形

    ctx.restore();               // 重新加载之前的颜色状态

    ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形

    ctx.restore();               // 加载默认颜色配置

    ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形

}

draw();

九、变形

9.1 translate

translate(x, y)

包头网页设计-高端网站设计公司