canvas画布使用的方法（canvas使用图像Using）

Canvas 更有意思的一项特性就是图像操作能力可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等浏览器支持的任意格式的外部图片都可以使用，比如 PNG、GIF 或者 JPEG你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源，我来为大家科普一下关于canvas画布使用的方法?以下内容希望对你有帮助!

canvas画布使用的方法

Canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。

引入图像到 canvas 里需要以下两步基本操作：

1. 获得一个指向HTMLImageElement的对象或者另一个 canvas 元素的引用作为源，也可以通过提供一个 URL 的方式来使用图片（参见例子）
2. 使用drawImage()函数将图片绘制到画布上

我们来看看具体是怎么做的。

获得需要绘制的图片

canvas 的 API 可以使用下面这些类型中的一种作为图片的源：

HTMLImageElement

这些图片是由Image()函数构造出来的，或者任何的<img>元素

HTMLVideoElement

用一个 HTML 的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

HTMLCanvasElement

可以使用另一个 <canvas> 元素作为你的图片源。

ImageBitmap

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

这些源统一由 CanvasImageSource类型来引用。

有几种方式可以获取到我们需要在 canvas 上使用的图片。

使用相同页面内的图片

我们可以通过下列方法的一种来获得与 canvas 相同页面内的图片的引用：

• document.images集合
• document.getElementsByTagName()方法
• 如果你知道你想使用的指定图片的 ID，你可以用document.getElementById()获得这个图片

使用其它域名下的图片

在 HTMLImageElement上使用crossOrigin (en-US)属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染 canvas，否则，使用这个图片将会污染 canvas。

使用其它 canvas 元素

和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

一个常用的应用就是将第二个 canvas 作为另一个大的 canvas 的缩略图。

由零开始创建图像

或者我们可以用脚本创建一个新的 HTMLImageElement 对象。要实现这个方法，我们可以使用很方便的Image()构造函数。

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

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

若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片：

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

如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预加载策略超出本教程的范围。

通过 data: url 方式嵌入图像

我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

img.src = 'data:image/png;base64,UklGRlwfAABXRUJQVlA4IFAfAAAQ6wCdASqMAhYCPtVqsVGoJi8io5L5MeAaiWdu/Fd43dIHd/80b2 4S76 cs1X/mA// j/cOv7L/r r0zexRwHtPOyvZ/9i1 h8XxG/hfL042Q8kJtb4uP3zpPvnSffOk dJ986orF9QR2dN06SGM5Ouzv77RvkTzOKzcNFmzGDqWlci/K5F VyL8rkX5XIvyuRhEH750n3zpPvnSfV pHktkvODJecGS84M/S5F VyL8rkX5Btl4U/750n3zpPv6A2xPvnSffOkEiOUgFkbL8uCxmnnwQAkvODJecGS84Ml5wZLzgyXnBkvODJecGS84Ml5wZHwgatUelOz7gZKxvD6ohBFLPG3KPJYVNgy5 BeJ7cvgGN32VCaL8rkX5XIvyuRflci0GcpRR/0kNmdyZr0VAEUAghCzl1AavY8188ipQ34k84Zcrl6Gb4lqdrKY4Lz23kIHm3nSffOk dJ986QbTiYkI6HSQIkc4KFUlvEFwZ4wstqGzf/Lm0daJL EtMTfcOKw1GdxPY9G 8xBZ1BC1NqfXzIKyYXixedYf7cQOyhecGS84Ml5wZLh0iH aq6/ WDrQNS/0Uamezx3TYjS6YtGfQPUMqp7b2G7WSOJ9OoIUSVxnDuQFy3NPNlRM8EoL/ZIMP r7VwnTYw8Mk3KWWZeHCAJLzgyXnBkvODHaKcmzQCYr9/oyjyj7nvV61SaH9weLJdqq28PldPC2BE92ytbKMQ0lMyzItOL9aENC tAsipmotJbCqH2BQza0QhUznsjKkv3L7LX6M97jRflci/K5F VyPOCZ6ckfyTP8PnuNoWI0gItK8xlY1XWwdsYL6oo6108mC44jslBGlEdje5UFd YkcURXPPTrKi0uexNMe90uEJzOhPDvobH2hyLU/gsEjcqlpXIvyuRflci Wxn cH pSEjnrTX 5r j01YN5lY/AYCtxwea1VJI0kWVcPKFhv f /jvKXuEGfP8qV5ZYb3UTjxn/au1ccX3p7URhv2rXzpPvnSffOk dMC cGyNEfNt/6mXsK1PJdYYKiaevVfaEy97FiRwYd4YyC1zVf/6atdCB45D3JI8tiZ1SZd0uhzIYEaTsMh/vmlB9BNA4sZlCcRLCzgyXnBkvODJebUHKUQcKVtazehII1r1hIGu5HOTgn4jLIKr38B5ePAiMXHYMDatj0Tk6Z1S7p3DnKqHWiSMPwnaulZ877KDvNznANJnCAlPwDE7O9QOHU 8kapQ rgK6SfDgQUKuO/phybV Z8GS8pTPgZw D CiYdr5FIKvVgnSJz8aGfIAXZkYCnW84uYsu hVjBXmgDOd19mRXUgVvtfv/6fSKtUjG2ITwgy ikwOSUUGycA97KDHaq2bWrQkD8vEm71MC1ErGiGyvuyjRTCdDgyXnBkvOBj7 SfrcYvLJnmb/4oPTRR3 QRde2IBYc7zEbZaXthDb5LwH 4p4t8ih6vTe9EQIlk23IY5IiwwyZAtH0ouzwCdLFFJ00 LXqwjXlPzwZdpGvy3L8rkX5XIv2DBK370y1taqVixpZYhZYo9ZVWHZ3hwJtbdlpsxNVVebs9a132lYbIDCNpfi/NWF2HjwZ52LbKJFYsXTEVcEjs7KE2SRIr1jCF82F7rzF9htTsjvDzPgyXnBkvODR3sEeGUj05pMc6GK9E1azk91GPdYtHpswGI6C2OR19VKjDHfFeSP1Rc6uPAHNMmh8AIHoWi8eYCAuF1tRjC/ZGJrqQC/NIwZqdqlpXIvyuRfUcc1Nghy5HDPKwLzAqMeP6xe9eUqGG0M5XokB7vDlThE W5hwweP/IAquFlTBAxYSnqXfY9h0t40iDwPJbEB 7jWYOme7et W26j68UToRYZDWyM0n3zpPvnSoAUVWZtewoogL95J/d6eNVIwwhaKs66GBC4cG4yGiW 7Gt8pOAPiJNjIohVBtqnS8L4uShueVFa6M2rK0/zBAoBeejYn3zpPvnSfWGjhJswaZKjDTEyvDoez0TNTae1 0TwZN5yihGcmBq2Xos4xwPe91qTAchigO W9ZbFw78A3fOk dJ986ZMciJa14ZJnbsHCbTQ26p8Wk8OsKy/js9ThQEMGL79WL6UC7NJ7bMhAVUMD6jeth5LzgyXnBkvODKMiq6Y/TwkpNbR0dfO7DNlpUXihXxjTDJejavzPgyXnBhSlvzA2yMcJv Rem7RAEOh3gEqtOvlW4UNH750n3zpPvnUY4m4GZ1RCJTwKjJkoqCAQO/ayf7Z8h2tAl0KBA2xPvnSknYn3zpGXZE3/ozpFedqqdREGiHQzdL2YZ8GS84PGYzpPvnSfV1eVyLW87NQpxKqLbmtdG1fmtNho3U6uGfB1 yuRflnJ1vnSfjC4fEYOYEwLZsDDPgyXnBkvKGrXC3IJChVXqqyX274VwcdSPxvVV95f0eLd8O2hNSQeMbuuO21VYieNlrDpW5H43qq2CkxEsChcKZYPUpPao/8TM DzAedJ/aTN6wkx/M/7B4IAD 7kQIttkb4il6vZPO /4QPKP8YadjMV1hvrqZLTx5Kh5/5yaaQR WQf MNOxmK6w311Mlp48lQ8/85NNINZ/Iz7aRc/TslIrlRrdcXSjDWbS0kAAAAAAAAABx3z8I2qtDAAAAADERbAR0AAXA8iNXs2sGqFs29fdLIcAzun6hi74Aa5 EupRtivQoQBBrVQAA16nh23QeoVU0aykPQns2bxbsmxACrGUABjQKGNJioyVEwijjIy rXje7P4So32Zqwg6OY6682W6ErYMrlxRzapuhNpH4URIIVXc0fqHiXZMd7EGtgMexgAAAB0qww9E79h5xvvCj67whmriEJA5kAdiV g9E6aLsSEXZlvL/bnmbiHcVi9uofIByg7YDbDL3KfhSexQEfq8uiBNJK2xhMWssHXKpjKwia0MJuhQ7534ka3frbYRuPnbjSwxscdXWxTfDTY6CBtjnbX835zOEQAlcFBLuZa3WnvQpAONSlKczD46K0bymOc3/FY4MhzwfG2ILtkz5nHAkAAD7gTJC/0etzncmgGlOd9C6/00Xs0 dDEsrH3GF/MmWbI66DKo4A8UNU3A9lle58J/txoYO EloQMpcfKQf8vNFIgRF/Bk5Ch0CxiNm0uJcoHatEJzXo3lgJbDEi4mFa Orrrymh pFsNcCJKuqVgNm4sEvu5EOKzKLoLu3rmfgsEXucWJ nIyB2CRx Atuss5La75tNV1bPo0gHpWUi8H5R3rkA2TyZZOKI6rh0DKxIjpNepOk7VbMvn6lEA0R3xQJ5yXR1AbrF8FZghdJWagoy8fECnHQKyPfbMNx4VF93YuBbSpgwIyVReVbVzMMQyJYG05WQGoJx18r0BUGfOZSYxdAROsBSz5AXGQ62Gb7yeZAGtGYDK C/C3zTyLcl KsGtNhs8jp9iOSi M22QAaE5uuiC8TvAUeWDKGYVenwnAhLtbowKGo3JMiN7DHc3EBOYftoxgDSmgFLiB7rKVYGKrgUGCkiDZNQ4IUUMaG/qRewxN8UiL5hlVDHnjYZfE85yQeHE5YAH fmXJ3f33wqkPHcF6a7xXrgl3p5QcJxCsso9OOsYaO1QaFHEzxZMPW1lVxstX/xtogcGRcwzIA/YieLEdLfTkKRcjtuWeGstasNnVBpcYnecokVICgr0C9Mg2FSbE18JPaZvD7BzkBZtoOwnO4p5mczhscUES/Q9gWNxIsn5asyDKYAIIqxMoL2Lo59zi6zivg82MO khf3nq5oaGYz vym8fAOo9a5ZscsZZKVaPSOjrpFxz1ob nGukd2/6TVgH3RRI8drO8m8v4mh2qoc5RmKLm GWPfvoq/04YELH42ts/JtXDp89OWT1dWwFfvdb3f7KcoytKWP036a1Qa5deoEFVNRk8VMryIJn7lJQSEEirNqbkOGg9oowdPS4Mf2j6lKT/oycdqDzqD1aIk4mW2ifpvB oGB5H3Dei4KYZ2q1oPcV5MylAzp6FIt76D3Dk jTwMqr8KWc2EFw1g6ZZtbkbrISCgKgxlcVNbED aYek5nfV5cjO5EZimVi jhVoAIWKhjNizPBYAQ7IEjZlGnAD0n0zBgA nI98C9hArejG8gv9X7ohFlLYf9fDT/6Wz0v jnEAaFy3now5iZEfT9czt QzvMIhVkSH Pj2yPhfBWsWY5xQDd8libXXBtd5AwoQXAU9ZiuB9TZPWm5vnmEUX2W5IophsWcVkH/TdbzINfzAkJ0z57LCz2bLNlRtdD1wxh8KiB2N7 dYhPNgl3lNfS2Yy2N8X3oqIpQvIlHETJzbsxUs9k6C1cLZdrXPIZqy957wiNpAYUerHXzsTDvtVm1p0oleKmZx9XcO6YotTQQd1DVslcWqPQgeIxhFkytVIPNKanVxfiOW3ffG6LBq9su6ahSTP1KgYE2Pmobdu1ODue7rIt Pme/GDWVfT XPNrEPPGAtYt5jI2Ip/DwOlFx0h2aSppgpmzh2jQRBF6UR7El8nlhfOhwCbVu5KSQpwsbA/wGybWKUV7vGDsJF4Vjax7zo9bvkwflar3deRnt iebQJTX9w4yDxux4eSV/bW DmYgLcYCVu5ZLlmtAO8AuIX1UmryV7/glwa/DC8GAH4lA7SFHxXLG55p41PpcjoBERsfd8sonBgxssul64T MQxGjKrIHS4IcJil/qIT6dWTlx14PGwncDJPIkJrYkUIHlZ6/P90Nm7HEq24fxEeXlywasiEOuDdV4XSJUIqa2K13 xwi0qMbLe7I19Y3L1iNzD36 q2NwQT1oTHSwolRNqL8plApk4BRx RwM0gF4IlesdxHK4c8HKdC9Y4ECBdn5sT75o96889HuOKFqLKDnYy9sX8LTAk0Hm12KwCNwhs/CqnFtHa66e3yt2E4s/FlVB3rNTnixZuV4JlHHE7XLq58e0mrh6JkncFEoSLK9YEZbBF1/QXG5JqRtdjHz1hG1mZNAdd1RjT64cGOPpnQBTWmOEho3oUUYqGJ0OjPckXFk0VaNzQRzMO 9IXURNGyrkAIa7KK3/NJTmt6O6brdzz/lUn/ge8YMtKz7DSK09XdbBrUN6 mVIyZ9yqWs PEtVDBkDiaPvEaLimfMbcLPjQ 7ea1wp7xCrA4Pq3xczN/cdv5Q W1fmCkal/DuGDISe8qm0NxY7OAkUq6DyzMgbWKzzI1YSUtODwm6NC9T87wJirXDa2cpYtwQ23AOzOO/kii2ID3B77CQ7PNTI6KCiawDGsaHf99Rm D3Tbas/53LU08DgHSPqQZ0vReZG9x5qqRt/V9zvGeKXC0wC/64IjNo9pyQxdY/EGag2asnNKTx5hqwqQk9si LJpGyXsrKVBZ6rGx60d04as1RZqDHBwB07QbxopFEMafn9fUUoUN063uzRcvHkYEJgWSKRj4bI4Ml1Jg8ShgTW t7xWDFvXMb714qfpEwUNc25vmnZYu5vCa1wYDvjL2oXBKrIqUkQb sUv6 McrUZj7OJ7X0zdONE5roA/pR3At4SAKw5nI/2QAzDNwIC ePZFF3MznafQ AA9/jgXqeT0TeKUQ1ur YIPKqDjAKZZtJQTS012BT61a/FUTX//3P3KhWtOdj8eOOnGV2TTOXtc7ldR2McHs6wOp1yvk0ycoKbFLTVHxlessraI1/9nSpJSW7KQQ78MjEhnLkdkFjFhBl QD24seDN7DcNxn/xlWCXerPfcrbYYV PoVzWwNKAx/7ZZTRTUwJJee2SIzmw6sLOwcg29EBro8ZWCXSB2hFJjZcsDk90ea4ivDbSyWCGfwV/vVDebnDTyzS4hIWx8ZPmtaLyu2nss4VNb/OwWsEKeBxTQofFcvkgWnChjmwWL47peZOWHDJDfvgMNRethaNw9p8TGYmECDFubDqo7DfYjmUoprpLr WpgU vLQ8MNPYdqltVjYsLF1RSMlTo waYSlQDgluMID/xTBqqaiEelqPOhfWhRsB ZbyP5YbopzDVnq3NL0W /bXSf/c7TuiQloxoaf2dxaXq Sm4DP6YnIT4c5jTSjkUQwaPW5F3BRSrBfso WAUXWx4HAduJ5SEnZCAXW4jFt1iMXiESb9Qdzk9253zqmu4LI5epES/YnKSvHNoNuVlnR1gTt1jZWpnMNMFsyr2xIU8U9LwdnpMR7niAKilRQsyatvc37 bxNgw7vAHHU46myiF5KbRSOVpzoKX7up3WJU3AzkSG79WC wjU6ykmUzXd5CezN6ajKgggofDRu4Th8ezzZTzqiejA8UjLP7VZb5p 33N0fOoH3dZYR1b/x/QcdzeG6la6LRkLa0NKjBRDCdFVZxsq3N/MNHYPMBQKv/rm0vvwaHumBhqaIe7Wz/gqyzQDmnEcGPgXZRyR1dl1CTkQuQf4i6m0PrM28QEwuqInGByu3N2xUsrpFk/CpnbEudngB0rNUU2816/Ndx8jtar57USVmo/3lXBu dqtPJwvjBCJmCYmyTjq6 y4GSAfdgp1uZnWSUMuh5OKMkqevAHKovkDkbhU4Zb4jklL2EgDdPcp1OKNtbchUc7vZFDRBO2FmEOA4oeN6hR2TjKC nfDcZSoZeUJmEw/DmwZhClT41m4I k3Ny6Fkz/PyiOmwOykZScCosOpFk8kvY1CkSGwpeYxl1q4MDNsjfvpk/h5a5LQrbljXKKZ3trTl8NoYCPxbm7w8xg/X4O lFfo6YrVCOoTJ4ppmvE0L erfpN4RaZbZ1PlDw2SfLs8uTYwN/06DnIoQHIs257dyLx4CVbd4yU2LPQKSsDjMTaQqyS23GY25U mYSh83moRQAoUE7YZJpp3/jwt374Lyr7PgD3mh3EJBRVKpsKO8qA70yiki5xRWGpAM6 xUIb5pnJoGEzLl0OEhoD7mMWb9LTqaXjy2J2lzmQOlejNX2xUGxdz/Zv6umH/fjwpn/LWCrEowNnGqsvextsHslpmFf1cixlO2BiNLmRec7K7Z5X66Om8mRxlr3823iRRGIv14RdsqK5OTG BcDYCjkItsXf4Uh81aEUYf3zHfmm6b7WU4Q4yGgTIik7JPWVATOSgq XYs LAr1LvLRUfLO 6toZeeMhXN5D/F 56crpVc0KWUBYoh923UxWpcjOD1v2wl7afySCNtUtkKyRzK1Y55gRZpzla5LBgnMvTwZP1YQSMvZ9iUEeytybcj8nzZ6H3t4eW2Ggv9pPMUXX1d2pN1yAmQdQZMrtCvZqy9MO19 lRl4ZBkG5JNzeEQq7fcgIh9WG6hX1JWpckJ00CHvf3n2z0kj8r ydkQbH5xGiXgWfgwKmP2s1R5Xpt0qtRdCP Hv4a8n8BkzqPX 3Y9SlBFQKClK O58X4BvIcNJ2VqNdzmhvcNXciYRqnOoRxn0iL8d ZB0O2HekHt2wo1Qmwlbcx8 myA/qZwZtbkn46b/QfGM4Xu9y40P6zr9qJBHR583S9WMwuZysEqvC5zx95kEe mwyxPSzr gg1xIAqNrgBj9n7qlvC2Ms1xrdk17uMNic8uth0rjqRSuNYgKonp2YLc24Ijj98rYAC/sYYfoWKt729NZ rE0PiF76eE2jVQ9/bAf2EYBIcIpKDidx8s0aVeI2m7FIKkFjRM3PkHsbv2rf/5r9eH0evriSHUZdreuMrj0vhPPPoxfpxf1wdWJBBscXeLt/rg2oOEOA99O8TQaqo ZIxMHB0obtkNge6Z8rzlXt9VDJlg3WMN3dihjaaWhWMJF23jq0AdPhvIaKgqhtK2yJZwA/X/twDLcoiEahvsSTcmYNyTcz/NJTTPDwWx2/R3KfhA0I5Yuj2Sc7FhaH8tAErViFa2K1jAgA2EThE3FN2iIli6ew8s9L94Lfehx2cATYkKz3WaLRZiSTFQpJ8cGLG2YKZGOGBwLCo4o5QoABJtLAcRW9woxEgU3Faei3LGxjvM69XOo17ktrmUKJo5SdEW4WjyOEUVrhGyNVlpu9G19Sgk2sRN1CfVCIQ XSg 5A6ry4YQ/8u57LRbpDXuWl2faxQLOb4Dqb2VCmACqQDp3Rh7W1btugfhNpy1GkZvURoBiolPRVvwHLt1jhjse8mjVngoI5RPDqQJfbWwwVsjVe6owtrd7M9WuXubyodl29c4nxTb85OnyboFVTQv0TWrbqijhrecZrw9ItWEUIHPz4tG9p558/p5hP LgBMl6NW4WOnzJhjMUbsF0vhYpgYNil8lvbqKeY0IStjj46nwvMwwuUe4LDuX2PP7Ano1vEVuhhtE4shXthfi16UrCq947LsaJ09n6kwjNZHn0VCcvknjy5uclE8d5hOgqvr0lNwnY w8NW0MDksuSTI1naPSjYy0ZklfHbi6CmwBX2mMOm/WvArQY/svQt5EfseqzGmO/JQAAJZTAUcY3OEZTiV9XX4u2sn6mK osWBWYQ100m39h7YvgMuPbK/tmmpYSjK9ip4dmAg6XTsD53TSGiOSJwiWE2op4eKLht RU0oUWTBumU8i3Xwr6CTVnL6O0QoEv ubISeOEF0bS1kleihZKw26xDIfB6AajWi1AEq2mwqClsh0fzmusNo79v7lWxezAXQSJPqr4XVnCwB1LP9IKgK4nGAaWywoe1AQsAnjYK3 phjEK389LEPDsElgd9c9OpoYTmh9udLpj7fq3f 1ehgD68biJscP/TNGJIHCj/vc3bHlaTvilWEI7d2N1sCyMilEaRUsNzE5HUphYNotbz7fM 0C15UllgHHIr8OhYl4Yp4m8A65zZfMumd42kyzbzkqk6Yn5AstADmYeS0rAeNd3FAogttdqIFTYBGE2rB74nYpR6AXSAAPjNqZ3gjJ82OFm8gajFDYyJ4qFXQ/9Vrk7Uj6/9RdczEkRqUYfnk d6ly1fzJAL xkTeVSyupqsh25MzVay6Sta8XOGsz3 xfR tU8 mokkL7zRsybJ3SMFbhUWSVgRLvuw9Qzxsnc10liOlsU rY wKfoZWCBxPi dVYzWvMVHE6tNu514nSA1iBQm8bhnDlWGPANrB koRh/SFV3y9GKQMJejBqbHdiQBPD2y 1ASktXzbvqNFuXqIZC5Cb2Qg/qNqzqab1wSS9B2WFgBH5c icS2cTlvZ/ndU5xgUkUNRC717xf1WQUMxxVT/sOzvKPRi5FloCfL0GKgUBwvJV14rF2j5hQ7PlWtA59A3ZKj95j Dt2MUMB5rctP3oxo5Qrkr300xvSUa/wvl7QoCt17j5 PWo7f0RGTCJ1IwBPO8AjAMxSS/QnNiZKQHz7hP8lWF6ZBs3kW 7VxAMe7va5sWcfYQWfUc5GL9YtW2Y1W8uZRVQbKI rbCbC5Yxmzdto bLZxoZ3sEyNS Q/7W4ZVMk8aGRXw b731CYGjHaBrm/icnw 5p9XOY0pOczIx6GSglqXj2mOHd3vR/hDx6KrOQjtDwCOkaNBH4oj8UlYZ00zI0LhQLa OfbGVNUk8IhfAPS3AK3aEtY8AYXbtyAQxu106UmxL/GXuSuMBFulrGmo1sP7YmJdpuUfdFw6aQEho6/LoDNXO/SrQxmSvz2K4AbhYQeV9V3RzZ6tgqxsBINUl1olR 5/puEDVjea2WpDWmzEt6gMyYnhEUgA2bRYi/pfERVpQ19mLODKk3A dl6GA6Scs1SVl8pPhSsc5EBX jEGtliHPEpDF7APvBUG8urvj T0QYl6ReF6SFdJOTzHtGLNsqYIm4F5sZweZNB5Wf0KBI6lNnzoC5tq9WpYyQ86M6CaO0jISIk2nsQM AGcNlPIlPoYrecAehH1MsvsS7PaJ6SUBwgIsyMC/sYADgM64YCnoVDjgY4VVpJ33/GKASs1 BjiOZvZI8HAyhUmnOMqVd2MNawBhnRSow 1s XZ6YlDwziE9guNsMxcTNE/FT55omddXZ43QTiA9uSEt357EtZYLh9Q4koxoY3 e MrxNQcJI9LiigBVDBzJ7JqT/9xaBJh7aokDP9GrfMueojLqyduYgq9o7FIfD m6gGH0eqNP8bDCFUQGfSw3lPigx2Quk1UYOdTxuR9RAHzZooVB7w6RXwji16CFw wAM7rgiNneZS6ubA0/2T2H1GAzlo5Qy2d/cUfv6k3UPBY3zIUc8mVm8cPMq0C4LZ27Beku81WB3NHwbqvhyd8eSt96P1JTSdsxE6j9PtHwNlZE4wCNTTnHxqkuqSHaQxqxMylhU42n6NX1iGY4PB7lAEhczTQoFfFzeYw5bx1EADkyfyzC8He9saxER6cwkuAGop/fDkuQ S2e/hzYX2aXN009tq3HjZOAVgB/QKO4C0LiVggRnX2hWPhgAWOu5NguOGFrib4GA8lryR6KmpmCHcrxtK6uw QqtDuQaOarfKC9xqomNp oafMfKa6O/LSBCQDeMSFYW1EQBPSNZAVEZEETikAdlsPmubpECJHYAACC6Cv5KOm3ofHV3edyqofIBQK7PGTGKAA9IyiUF3IZsRTDvumwAARmkM5d4Tc4otjBKPqRiQ02lpnbtx29492UDBUqiW6U6bHNGRzxsnq1UcUQFNqsjxdPYZBOE7Wc0/39aV a2UTwVwJplTKn AE/r62w2famwXD6aifwe/e28Ec1zuB87DEvpQTdMYr3oV/OSArwAGg4vz4uKCQFBH6U4kuLmhLY K4UgFzpspj9Jy1wfZh668ysAAAA=';

其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：(比如上图一个还不算太大的图片)

使用视频帧

你还可以使用<video> 中的视频帧（即便视频是不可见的）。例如，如果你有一个 ID 为“myvideo”的<video> 元素，你可以这样做：

function getMyVideo() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); return document.getElementById('myvideo'); } }

它将为这个视频返回HTMLVideoElement对象，正如我们前面提到的，它可以作为我们的 Canvas 图片源。

绘制图片

一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。

drawImage(image, x, y)

其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。（SVG 图像必须在 <svg> 指定元素的宽度和高度。）

例子：一个简单的线图

下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制复杂的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; }

缩放 Scaling

drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。

drawImage(image, x, y, width, height)

这个方法多了 2 个参数：width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小

例子：平铺图像

在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50x38 px。这种方法可以用来很好的达到背景图案的效果，在下面的教程中会看到。（图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。）

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ for (var i=0;i<4;i ){ for (var j=0;j<3;j ){ ctx.drawImage(img,j*50,i*38,50,38); } } }; img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; }

切片 Slicing

drawImage 方法的第三个也是最后一个变种有 8 个新参数，用于控制做切片显示的。

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

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它 8 个参数最好是参照右边的图解，前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。

例子：相框

在这个例子里面我用到上面已经用过的犀牛图像，不过这次我要给犀牛头做个切片特写，然后合成到一个相框里面去。相框带有阴影效果，是一个以 24-bit PNG 格式保存的图像。因为 24-bit PNG 图像带有一个完整的 8-bit alpha 通道，与 GIF 和 8-bit PNG 不同，我可以将它放成背景而不必担心底色的问题。

我用一个与上面用到的不同的方法来装载图像，直接将图像插入到 HTML 里面，然后通过 CSS 隐藏（display:none）它。两个图像我都赋了 id ，方便后面使用。看下面的脚本，相当简单，首先对犀牛头做好切片（第一次drawImage）放在 canvas 上，然后再上面套个相框（第二次drawImage）。

<html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <div style="display:none;"> <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> </div> </body> </html>

function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw slice ctx.drawImage(document.getElementById('source'), 33,71,104,124,21,20,87,104); // Draw frame ctx.drawImage(document.getElementById('frame'),0,0); }

示例：画廊 Art gallery example

我这一章最后的示例是弄一个小画廊。画廊由挂着几张画作的格子组成。当页面装载好之后，为每张画创建一个 canvas 元素并用加上画框然后插入到画廊中去。

在我这个例子里面，所有“画”都是固定宽高的，画框也是。你可以做些改进，通过脚本用画的宽高来准确控制围绕它的画框的大小。

下面的代码应该是蛮简单易懂的了。就是遍历图像对象数组，依次创建新的 canvas 元素并添加进去。可能唯一需要注意的，对于那些并不熟悉 DOM 的朋友来说，是 insertBefore 方法的用法。insertBefore 是父节点（单元格）的方法，用于将新节点（canvas 元素）插入到我们想要插入的节点之前。

<html> <body onload="draw();"> <table> <tr> <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> </tr> <tr> <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> </tr> </table> <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> </body> </html>

body { background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; margin: 10px; } img { display: none; } table { margin: 0 auto; } td { padding: 15px; }

function draw() { // Loop through all images for (i=0;i<document.images.length;i ){ // Don't add a canvas for the frame image if (document.images[i].getAttribute('id')!='frame'){ // Create canvas element canvas = document.createElement('CANVAS'); canvas.setAttribute('width',132); canvas.setAttribute('height',150); // Insert before the image document.images[i].parentNode.insertBefore(canvas,document.images[i]); ctx = canvas.getContext('2d'); // Draw image to canvas ctx.drawImage(document.images[i],15,20); // Add frame ctx.drawImage(document.getElementById('frame'),0,0); } } }

控制图像的缩放行为 Controlling image scaling behavior

如同前文所述，过度缩放图像可能会导致图像模糊或像素化。您可以通过使用绘图环境的imageSmoothingEnabled属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放。您也可以像这样禁用此功能：

ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;

,