带你快速玩转canvas（3）贴个图片，写点字

约定不等于承诺〃 2022-07-12 23:24 266阅读 0赞

### **5. 将图片绘制到画布之上** ###

解释：

1. 简单来说，就是将一张图的某个区域，画到画布上的某个区域；
    2. 和ctx.fillStyle = pattern不同的是，pattern是将图片作为背景，该背景位置是固定的，画图只是显示那背景某个区域；
    3. 而本方法画图是取图的全部/一部分（比如400x400的，取他(x:200,y:250,width:50,height:100)区域的图；
    4. 然后放在画图的某个指定区域（如坐标x:100,y:200处），也可以缩放图片大小（比如变为width:300,height:200）；
    5. 运用场景示例：有一个人物八方向四帧动作图，在一个png图上，可以根据需要，只取其中一个，然后绘制到画布区域之中；

**ctx.drawImage(image, dx, dy)**

1. 将图片完整绘制在画布的x, y坐标处；
    2. x, y是图片绘制时，其左上角位于画布的坐标，参数类型是Number（不是有px的字符串类型）；
    3. 不会对图片进行缩放（即保持图片本身大小）；
    4. image是图片HTML元素，例如通过document.getElementById()获取的HTML的image元素，或者是在JS中，通过new Image()创建的图片元素；
    5. 需要小心一件事，图片在创建后，并不会立刻从服务器下载完成，因此假如图片是后续加载的话，务必要等图片onload事件触发后，再进行绘图；
    6. 应对办法：提前将图片下载好，这样绘制的时候就不必担心图片未加载完成的问题了。

**ctx.drawImage(image, dx, dy, dWidth, dHeight)**

1. 将图片绘制在画布的x, y坐标处；
    2. 本方法在上一个方法的基础上，增加了缩放功能，dWidth和dHeight表示绘制到画布上时，画布上图片的宽高；
    3. 具体来说，假如一个图片是100*100，dWith和dHeight是200*200，就相当于将图片缩放了200%；

**ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)**

1. 取出图片的某个区域，然后绘制到画布的某个区域；
    2. dx, dy, dWidth, dHeight和上面2个API表示的内容是一样的；
    3. sx表示图片（即image）取图时的x坐标，sy表示y坐标，sWidth表示从sx开始取的图片的宽度，sHeight表示从sy开始，取的图片的高度；
    4. 示例：假如image的宽高是200*200，这四个参数的值依次是50,50,100,100的话，表示取图片x:50, y:50到x:150, y:150这个范围的区域；
    5. sWidth + sx的值或者sHeight + sy的值可以大于图片本身的宽高，在缩放时，会将超出部分计算在内进行缩放，超出部分视为透明，不会染色；
    6. sWidth和sHeight可以是负数，有效，计算时同样相加即可，同样可以框住一个矩形区域。

DEMO源代码：  
[https://github.com/qq20004604/some\_demo/blob/master/canvas/%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87.html][https_github.com_qq20004604_some_demo_blob_master_canvas_E7_BB_98_E5_88_B6_E5_9B_BE_E7_89_87.html]

[点击直接查看DEMO（在github上）][DEMO_github]

### **6. 写文字** ###

解释：

1. 可以绘制空心文字或者实心文字；
    2. 在绘制前可以定义三种属性：
    3. 定义完属性（或使用默认的）后，绘制文字到画布上。

**ctx.font**

1. 字体和字体大小，类型是字符串。
    2. 和font-family类似，只不过多了一个字体大小的设置。
    3. 示例："Bold 10px Arial"先取Bold字体，如果没有则取Arial字体。字体大小取12px.

**ctx.textAlign**

1. 字体对其方式，类型是字符串；
    2. 取值有left, center, right三种。
    3. 相对于绘制时的坐标，决定文字的排版方式。
    4. 绘制时的坐标，位于文字的下方。即假如是左对齐，绘制时的坐标是文字的左下角的坐标。

**ctx.fillStyle**

1. 实心文字的颜色，就像普通写颜色css属性那样写；

**ctx.strokeStyle**

1. 空心文字的颜色；

**ctx.fillText(text, x, y \[, maxWidth\])**

1. 填充实心文字；
    2. x，y表示写文字时，基准位置的坐标点。左对齐是文字左下，居中是文字中间下方，右对齐是文字右下；
    3. maxWidth可以不加，加的话，会压缩文字的宽度（高度不会变化），而不是超出部分不显示；

**strokeText(text, x, y \[, maxWidth\])**

1. 填充空心文字（需要字体支持）；
    2. 其他和上面没区别；

[https_github.com_qq20004604_some_demo_blob_master_canvas_E7_BB_98_E5_88_B6_E5_9B_BE_E7_89_87.html]: https://github.com/qq20004604/some_demo/blob/master/canvas/%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87.html
[DEMO_github]: http://htmlpreview.github.io/?https://github.com/qq20004604/some_demo/blob/master/canvas/%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87.html