{"id":13683,"date":"2024-12-20T07:00:00","date_gmt":"2024-12-19T22:00:00","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=13683"},"modified":"2024-12-20T04:10:24","modified_gmt":"2024-12-19T19:10:24","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91canvas%e3%83%bbdrawimage%e3%81%ae%e5%85%a83%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92%e3%81%98%e3%81%a3%e3%81%8f%e3%82%8a%e8%a7%a3%e8%aa%ac%ef%bc%81","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=13683","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Canvas\u30fbdrawImage\u306e\u51683\u30d1\u30bf\u30fc\u30f3\u3092\u3058\u3063\u304f\u308a\u89e3\u8aac\uff01"},"content":{"rendered":"\n<p>\u3055\u3066\u3055\u3066\u3001JavaScript\u3067canvas\u306e\u64cd\u4f5c\u306f\u304d\u3063\u3068\u904e\u53bb100\u56de\u306f\u3084\u3063\u3066\u3044\u308b\u3068\u306f\u601d\u3046\u3093\u3067\u3059\u3051\u3069\u3001\u6bce\u56de\u300c<strong>\u3042\u308c\u2026\u3069\u3046\u3060\u3063\u305f\u3051\uff1f<\/strong>\u300d\u3068\u601d\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305d\u308c\u306f\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n\n\n\n<p class=\"has-x-large-font-size\"><strong>drawImage<\/strong><\/p>\n\n\n\n<p>\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3064\u307e\u308a\u3001\u753b\u50cf\u3092<code>&lt;canvas&gt;&lt;\/canvas&gt;<\/code>\u306b\u63cf\u753b\uff08\u8ee2\u5199\uff09\u3059\u308b\u64cd\u4f5c\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u3067\u306f\u3001\u306a\u305cdrawImage\u3060\u3051\u3053\u3093\u306a\u306b\u4f7f\u3044\u65b9\u3092\u5fd8\u308c\u3066\u3057\u307e\u3046\u306e\u304b\u3068\u3044\u3046\u3068\u3001\u4ee5\u4e0b3\u3064\u306e\u7406\u7531\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5f15\u6570\u304c\u304c3\u30d1\u30bf\u30fc\u30f3\u3042\u308b<\/li>\n\n\n\n<li>\u305d\u306e\u30d1\u30bf\u30fc\u30f3\u306b\u4e00\u8cab\u6027\u304c\u306a\u3044<\/li>\n\n\n\n<li>\u5f15\u6570\u306e\u540d\u524d\u304c\u7701\u7565\u3055\u308c\u3066\u3044\u3066\u610f\u5473\u304c\u308f\u304b\u3089\u306a\u3044<\/li>\n<\/ul>\n\n\n\n<p>\u305d\u3053\u3067\u300c<strong>\u8ff7\u3063\u305f\u3089\u3001\u3042\u306e\u30da\u30fc\u30b8\u3092\u898b\u308c\u3070\u3044\u3044\u3058\u3083\u306a\u3044\u304b\uff01<\/strong>\u300d\u3068\u3044\u3046\u8a18\u4e8b\u3092\u3064\u304f\u3063\u3066\u304a\u304f\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p><strong><mark>\u305c\u3072\u5fd8\u308c\u306a\u3044\u3088\u3046\u306b\u30d6\u30c3\u30af\u30de\u30fc\u30af\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u306d\ud83d\ude0a<\/mark><\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"364\" height=\"320\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/08\/no_3.png\" alt=\"\" class=\"wp-image-4328\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/08\/no_3.png 364w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/08\/no_3-300x264.png 300w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">\u300c\u9280\u306e\u30a8\u30f3\u30bc\u30eb\u30b2\u30c3\u30c8\uff01<br>\u2026\u304b\u3089\u306e\u3001\u524d\u306e\u306a\u304f\u3057\u305f\ud83d\ude31\u300d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">drawImage\uff1a\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_15.png\" alt=\"\" class=\"wp-image-14033\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_15.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_15-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u3042\u3068\u3067\u305d\u308c\u305e\u308c\u8a73\u3057\u304f\u7d39\u4ecb\u3057\u307e\u3059\u304c\u3001<strong>drawImage\u306f3\u3064\u306e\u4f7f\u3044\u65b9\u304c\u3042\u308a\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>\/\/ \u30ad\u30e3\u30f3\u30d0\u30b9<br>const canvas = document.getElementById('canvas');<br>const ctx = canvas.getContext('2d');<br><br>\/\/ \u753b\u50cf\u3092\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u63cf\u753b<br>const image = new Image();<br>image.src = '\/images\/your-image.png'; \/\/ \u753b\u50cf<br>image.onload = () =&gt; {<br><br>    \/\/ \u30d1\u30bf\u30fc\u30f3\uff1a1<br>    ctx.drawImage(image, dx, dy);<\/strong><br><strong><br>    \/\/ \u30d1\u30bf\u30fc\u30f3\uff1a2<br>    ctx.drawImage(image, dx, dy, dWidth, dHeight);<\/strong><br><strong><br>    \/\/ \u30d1\u30bf\u30fc\u30f3\uff1a3<br>    ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);<br><br>};<\/strong><\/pre>\n\n\n\n<p>\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001\u753b\u50cf\u3092\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u63cf\u753b\uff08\u8ee2\u5199\uff09\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">drawImage\uff1a\u51683\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_16.png\" alt=\"\" class=\"wp-image-14034\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_16.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_16-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u4ee5\u4e0b3\u3064\u306e\u30d1\u30bf\u30fc\u30f3\u3092\u305d\u308c\u305e\u308c\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u305d\u306e\u307e\u307e\u306e\u5927\u304d\u3055\u3067\u63cf\u753b\u3059\u308b\uff08\u753b\u50cf\u3092\u5207\u308a\u53d6\u3089\u306a\u3044\u3001\u30ea\u30b5\u30a4\u30ba\u3057\u306a\u3044\uff09<\/li>\n\n\n\n<li>\u30ea\u30b5\u30a4\u30ba\u3057\u3066\u63cf\u753b\u3059\u308b\uff08\u753b\u50cf\u3092\u5207\u308a\u53d6\u3089\u306a\u3044\uff09<\/li>\n\n\n\n<li>\u753b\u50cf\u306e\u4e00\u90e8\u3092\u5207\u308a\u53d6\u3063\u3066\u30ea\u30b5\u30a4\u30ba\u3057\u3001\u63cf\u753b\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u3010\u30d1\u30bf\u30fc\u30f31\u3011\u305d\u306e\u307e\u307e\u306e\u5927\u304d\u3055\u3067\u63cf\u753b\u3059\u308b<\/h3>\n\n\n\n<p>\u307e\u305a\u306f<strong>\u4e00\u756a\u30b7\u30f3\u30d7\u30eb\u306a<mark>\u300c\u753b\u50cf\u3092\u5207\u308a\u53d6\u3089\u306a\u3044\u300d\u300c\u30ea\u30b5\u30a4\u30ba\u3057\u306a\u3044\u300d\u30d1\u30bf\u30fc\u30f3<\/mark>\u3067\u3059\u3002<\/strong><br>\u5f15\u6570\u306f\u4ee5\u4e0b3\u3064\u3002<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>ctx.drawImage(image, dx, dy);<\/strong><\/pre>\n\n\n\n<p>\u5b9f\u969b\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>const dx = 150; \/\/ \u5de6\u304b\u3089150px<br>const dy = 75; \/\/ \u4e0a\u304b\u308975px<\/strong><br><strong><br>ctx.drawImage(image, dx, dy);<\/strong><\/pre>\n\n\n\n<p>\u7d50\u679c\u306f\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"502\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_3.png\" alt=\"\" class=\"wp-image-13864\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_3.png 502w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_3-300x300.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_3-150x150.png 150w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_3-100x100.png 100w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<p>\u3064\u307e\u308a\u3001<strong>\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u5de6\u4e0a\u306f\u3057\u3063\u3053\u304b\u3089\u540c\u3058\u30b5\u30a4\u30ba\u306e\u753b\u50cf\u3092\u63cf\u753b\u3059\u308b\u3068\u3001\u3074\u3063\u305f\u308a\u3068\u67a0\u5185\u306b\u306f\u3044\u308a\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"667\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_4.jpg\" alt=\"\" class=\"wp-image-13881\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_4.jpg 500w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_4-225x300.jpg 225w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>\u9006\u306b\u3001\u8cbc\u308a\u4ed8\u3051\u308b\u753b\u50cf\u304c\u67a0\u3088\u308a\u5927\u304d\u3044\u90e8\u5206\u306f\u30ab\u30c3\u30c8\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"646\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_6.png\" alt=\"\" class=\"wp-image-13874\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_6.png 622w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_6-289x300.png 289w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<p>\u2193\u5b9f\u969b\u306e\u7d50\u679c\u306f\u3053\u3061\u3089<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"502\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_7.png\" alt=\"\" class=\"wp-image-13877\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_7.png 502w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_7-300x300.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_7-150x150.png 150w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_7-100x100.png 100w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<p><strong>\u67a0\u5916\u306b\u51fa\u3066\u3057\u307e\u3063\u305f\u90e8\u5206\u304c\u30ab\u30c3\u30c8\u3055\u308c\u308b\u306e\u306f\u3001<mark>\u4ed6\u306e\u4f7f\u3044\u65b9\u3067\u3082\u540c\u3058\u3067\u3059\u3002<\/mark><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u3010\u30d1\u30bf\u30fc\u30f32\u3011\u30ea\u30b5\u30a4\u30ba\u3057\u3066\u63cf\u753b\u3059\u308b<\/h3>\n\n\n\n<p>\u6b21\u306f\u300c<strong><mark>\u753b\u50cf\u3092\u5207\u308a\u53d6\u3089\u305a\u306b\u305d\u306e\u307e\u307e\u4f7f\u3046\u3051\u3069\u3001\u30b5\u30a4\u30ba\u306f\u5909\u66f4\u3059\u308b<\/mark><\/strong>\u300d\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4f7f\u3044\u65b9\u306f\u3053\u3061\u3089\uff08\u5f15\u6570\u306f5\u3064\uff09<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>const dx = 150; <\/strong>\/\/ \u5de6\u304b\u3089150px<strong><br>const dy = 75; \/\/ \u4e0a\u304b\u308975px<br>const dWidth = 300; \/\/ dx,dy \u306e\u4f4d\u7f6e\u304b\u3089300px\u306e<strong>\u6a2a\u5e45<\/strong><br>const dHeight = 200; \/\/ dx,dy \u306e\u4f4d\u7f6e\u304b\u3089200px\u306e\u9ad8\u3055<br><br>ctx.drawImage(image, dx, dy, dWidth, dHeight);<\/strong><\/pre>\n\n\n\n<p>\u7d50\u679c\u306f\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"502\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_9.png\" alt=\"\" class=\"wp-image-13972\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_9.png 502w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_9-300x300.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_9-150x150.png 150w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_9-100x100.png 100w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<p>\u3053\u3053\u3067\u91cd\u8981\u306a\u306e\u304c2\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>dWidth\u3068dHeight\u306b\u3088\u3063\u3066\u306f\u3001\u753b\u50cf\u304c\u62e1\u5927 or \u7e2e\u5c0f\u3055\u308c\u308b<\/strong><\/li>\n\n\n\n<li><strong>\u7e26\u6a2a\u306e\u6bd4\u7387\u304c\u9055\u3046\u3068\u753b\u50cf\u304c\u3086\u304c\u3080<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u3010\u30d1\u30bf\u30fc\u30f33\u3011\u753b\u50cf\u306e\u5207\u308a\u53d6\u308a&amp;\u30ea\u30b5\u30a4\u30ba\u3057\u3066\u63cf\u753b\u3059\u308b<\/h3>\n\n\n\n<p>\u4e00\u756a\u8907\u96d1\u306a\u30d1\u30bf\u30fc\u30f3\u3067\u3001<strong><mark>2\u3064\u4f5c\u696d\u3092\u540c\u6642\u306b\u5b9f\u884c\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/mark><\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u753b\u50cf\u306e\u4e00\u90e8\u3092\u5207\u308a\u53d6\u308b\uff08\u30af\u30ed\u30c3\u30d4\u30f3\u30b0\uff09<\/strong><\/li>\n\n\n\n<li><strong>\u5207\u308a\u53d6\u3063\u305f\u753b\u50cf\u306e\u30ea\u30b5\u30a4\u30ba\u3059\u308b<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u5148\u306b\u6d41\u308c\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<br>\u307e\u305a\u3053\u306e\u3088\u3046\u306a\u753b\u50cf\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"400\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_10.jpg\" alt=\"\" class=\"wp-image-13952\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_10.jpg 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_10-225x300.jpg 225w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>\u6d5c\u677e\u9903\u5b50\u3067\u3059\u306d\ud83d\ude0a<br>\u4eca\u56de\u306f\u300c\u3082\u3084\u3057\u300d\u306e\u90e8\u5206\u3060\u3051\u3092\u30ab\u30c3\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"400\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_11.jpg\" alt=\"\" class=\"wp-image-13954\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_11.jpg 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_11-225x300.jpg 225w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>\u3082\u3084\u3057\u306e\u90e8\u5206\uff08200x200px\uff09\u3092\u30ab\u30c3\u30c8\u3057\u305f\u3089\u3001300x100px\u306b\u30ea\u30b5\u30a4\u30ba\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"100\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_12.jpg\" alt=\"\" class=\"wp-image-13960\"\/><\/figure>\n\n\n\n<p>\u3053\u308c\u3092\u30ad\u30e3\u30d0\u30b9\u306b\u63cf\u753b\u3059\u308b\u3068\u3044\u3046\u308f\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u306f\u3053\u3061\u3089\uff08\u5f15\u6570\u306f9\u3064\uff01\uff09<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>\/\/ \u5207\u308a\u53d6\u308b\u60c5\u5831<br>const sx = 100;<br>const sy = 100;<br>const sWidth = 300;<br>const sHeight = 300;<br><br>\/\/ \u63cf\u753b\u3059\u308b\u60c5\u5831<br>const dx = 150;<br>const dy = 75;<br>const dWidth = 300;<br>const dHeight = 200;<br><br>ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);<\/strong><\/pre>\n\n\n\n<p>\u5b9f\u969b\u306e\u7d50\u679c\u306f\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"502\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_14.png\" alt=\"\" class=\"wp-image-13969\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_14.png 502w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_14-300x300.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_14-150x150.png 150w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_14-100x100.png 100w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">drawImage\uff1a\u5168\u4f53\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_17.png\" alt=\"\" class=\"wp-image-14035\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_17.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_17-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u3010\u30d1\u30bf\u30fc\u30f33\u3011\u306e\u5168\u30b3\u30fc\u30c9\u3067\u3059\u3002<br>\u203b\u753b\u50cf\u3060\u3051\u3054\u81ea\u8eab\u306e\u3082\u306e\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>&lt;html&gt;<br>&lt;body&gt;<br>    &lt;canvas id=\"canvas\" width=\"500\" height=\"500\" style=\"border:1px solid #000;\"&gt;&lt;\/canvas&gt;<br>    &lt;script&gt;<br><br>        <em>window<\/em>.addEventListener('load', () =&gt; {<br><br>            \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9<br>            const canvas = <em>document<\/em>.getElementById('canvas');<br>            const ctx = canvas.getContext('2d');<br><br>            \/\/ \u753b\u50cf\u3092\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u63cf\u753b<br>            const image = new Image();<br>            image.src = '\/images\/your-image.jpg'; \/\/ \u753b\u50cf<br>            image.onload = () =&gt; {<br><br>                \/\/ \u5207\u308a\u53d6\u308b\u60c5\u5831<br>                const sx = 40;<br>                const sy = 40;<br>                const sWidth = 200;<br>                const sHeight = 200;<br><br>                \/\/ \u63cf\u753b\u3059\u308b\u60c5\u5831<br>                const dx = 150;<br>                const dy = 75;<br>                const dWidth = 300;<br>                const dHeight = 100;<br><br>                ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);<br><br>            };<br><br>        });<br><br>    &lt;\/script&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/strong><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">drawImage\uff1a\u5f15\u6570\u307e\u3068\u3081<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_18.png\" alt=\"\" class=\"wp-image-14036\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_18.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_18-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u3067\u306f\u3001\u6700\u5f8c\u306bdrawImage\u306e\u5f15\u6570\u3092\u307e\u3068\u3081\u307e\u3059\u3002<br>\u5168\u90e8\u30673\u30b0\u30eb\u30fc\u30d7\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u3010\u30b0\u30eb\u30fc\u30d71\u3011\u753b\u50cf\u30c7\u30fc\u30bf<\/h3>\n\n\n\n<p>image\uff1a\u753b\u50cf\u30c7\u30fc\u30bf\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u3010\u30b0\u30eb\u30fc\u30d72\u3011\u5207\u308a\u53d6\u308b\u753b\u50cf\uff08source\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>sx\uff1a<\/strong>\u5207\u308a\u53d6\u308b\u30a8\u30ea\u30a2\u306e\u958b\u59cb\u4f4d\u7f6e\u30fbX\u5ea7\u6a19\uff08SourceX\uff09<\/li>\n\n\n\n<li><strong>sy\uff1a<\/strong>\u5207\u308a\u53d6\u308b\u30a8\u30ea\u30a2\u306e\u958b\u59cb\u4f4d\u7f6e\u30fbY\u5ea7\u6a19\uff08Source Y\uff09<\/li>\n\n\n\n<li><strong>sWidth\uff1a<\/strong>\u5207\u308a\u53d6\u308b\u30a8\u30ea\u30a2\u306e\u6a2a\u5e45\uff08Source width\uff09<\/li>\n\n\n\n<li><strong>sHeight\uff1a<\/strong>\u5207\u308a\u53d6\u308b\u30a8\u30ea\u30a2\u306e\u9ad8\u3055\uff08Source height\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u3064\u307e\u308a\u3001\u5207\u308a\u53d6\u308b<code>image<\/code>\u306e\u300c<strong>\u5de6\u4e0a\u304b\u3089\u53f3\u4e0b\u3078\u7bc4\u56f2\u6307\u5b9a\u3059\u308b<\/strong>\u300d\u5f15\u6570\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border-3\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"853\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_1.png\" alt=\"\" class=\"wp-image-13744\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_1.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_1-225x300.png 225w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u3010\u30b0\u30eb\u30fc\u30d73\u3011\u8cbc\u308a\u4ed8\u3051\u5148\uff08destination\uff09<\/h3>\n\n\n\n<p>\u8003\u3048\u65b9\u306f\u5148\u307b\u3069\u3068\u540c\u3058\u3067\u3059\u304c\u3001\u3053\u3061\u3089\u306f\u30ad\u30e3\u30f3\u30d0\u30b9\u5185\u306e\u300c\u3069\u306e\u30a8\u30ea\u30a2\u3078\u8cbc\u308a\u4ed8\u3051\u308b\u304b\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>dx\uff1a<\/strong>\u8cbc\u308a\u3064\u3051\u308b\u5148\u306e\u958b\u59cb\u4f4d\u7f6e\u30fbX\u5ea7\u6a19\uff08Destination X\uff09<\/li>\n\n\n\n<li><strong>dy\uff1a<\/strong>\u8cbc\u308a\u3064\u3051\u308b\u5148\u306e\u958b\u59cb\u4f4d\u7f6e\u30fbY\u5ea7\u6a19\uff08Destination Y\uff09<\/li>\n\n\n\n<li><strong>dWidth\uff1a<\/strong>\u8cbc\u308a\u3064\u3051\u308b\u5148\u306e\u6a2a\u5e45\uff08Destination width\uff09<\/li>\n\n\n\n<li><strong>dHeight\uff1a<\/strong>\u8cbc\u308a\u3064\u3051\u308b\u5148\u306e\u9ad8\u3055\uff08Destination height\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u3064\u307e\u308a\u3001\u8cbc\u308a\u4ed8\u3051\u5148\u306b\u306a\u308b<code>canvas<\/code>\u306e\u300c<strong>\u5de6\u4e0a\u304b\u3089\u53f3\u4e0b\u3078\u7bc4\u56f2\u6307\u5b9a\u3059\u308b<\/strong>\u300d\u5f15\u6570\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border-3\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"853\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_2.png\" alt=\"\" class=\"wp-image-13748\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_2.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2024\/12\/canvas_draw_image_2-225x300.png 225w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u91cd\u8981\u306a\u70b9\uff1a\u5207\u308a\u53d6\u3063\u305f\u30a8\u30ea\u30a2\u3068\u8cbc\u308a\u4ed8\u3051\u308b\u30a8\u30ea\u30a2\u306e\u5927\u304d\u3055\u304c\u9055\u3046\u5834\u5408\u3001<strong>\u7e2e\u5c0f\u3084\u62e1\u5927\u3055\u308c\u308b<\/strong>\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848\uff1a\u4f01\u696d\u5411\u3051\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u958b\u767a\u8005\u3092\u304a\u63a2\u3057\u306e\u65b9\u3078<\/h2>\n\n\n\n<p>canvas\u306a\u3069JavaScript\u3092\u3064\u304b\u3063\u305f\u6280\u8853\u8005\u3092\u304a\u63a2\u3057\u3067\u3057\u3087\u3046\u304b\u3002<br>\u305c\u3072\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\uff01<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue 3<\/li>\n\n\n\n<li>React<\/li>\n\n\n\n<li>vanilla JS\uff08\u30cd\u30a4\u30c6\u30a3\u30d6JavaScript\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u3092\u4f7f\u3063\u305f\u958b\u767a\u7d4c\u9a13\uff08\u7279\u306b\u793e\u5185\u30b7\u30b9\u30c6\u30e0\uff09\u304c\u591a\u6570\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u306f<a href=\"https:\/\/contact-me.capilano-fw.com\/\" data-type=\"link\" data-id=\"https:\/\/contact-me.capilano-fw.com\/\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a>\u304b\u3089\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<br>\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\ud83d\ude0a\u2728<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u304a\u308f\u308a\u306b<\/h2>\n\n\n\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306fcanvas\u306edrawImage\u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u8a18\u4e8b\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u500b\u4eba\u7684\u306b\u306f\u6bce\u56de\u8abf\u3079\u308b\u624b\u9593\u304c\u6e1b\u308a\u307e\u3059\u3057\u3001\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3067\u304d\u305d\u3046\u3067\u3059\uff01\uff08AI\u4f7f\u3063\u3066\u3082\u6bce\u56de\u8aac\u660e\u304c\u9055\u3046\u306e\u3067\u8aad\u3080\u6642\u9593\u304c\u5fc5\u8981\u306a\u3093\u3067\u3059\u3088\u306d\uff09<\/p>\n\n\n\n<p>\u3057\u304b\u3082\u81ea\u5206\u306e\u6587\u7ae0\u3084\u753b\u50cf\u3060\u304b\u3089\u3001\u7406\u89e3\u3082\u65e9\u304b\u3063\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d6\u30ed\u30b0\u306f\u81ea\u5206\u306e\u305f\u3081\u306b\u3082\u306a\u308b\u3093\u3067\u3059\u306d\uff01<\/p>\n\n\n\n<p>\u305c\u3072\u7686\u3055\u3093\u3082\u3084\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br>\u3067\u306f\u3067\u306f\u301c\uff01<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"320\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/11\/no_24.png\" alt=\"\" class=\"wp-image-2173\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/11\/no_24.png 300w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/11\/no_24-281x300.png 281w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">\u300c\u4eca\u5e74\u3082\u672c\u3092\u305f\u304f\u3055\u3093\u8aad\u307f\u307e\u3057\u305f\u304c\u3001<br>\u300e\u30d0\u30ab\u306b\u306f\u308f\u304b\u3093\u306d\u3047\uff01\u300f\u3063\u3066\u3059\u3050\u6368\u3066\u305f\u672c\u3082\u3042\u308a\u307e\u3059\ud83d\ude05\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001JavaScript\u3067canvas\u306e\u64cd\u4f5c\u306f\u304d\u3063\u3068\u904e\u53bb100\u56de\u306f\u3084\u3063\u3066\u3044\u308b\u3068\u306f\u601d\u3046\u3093\u3067\u3059\u3051\u3069\u3001\u6bce\u56de\u300c\u3042\u308c\u2026\u3069\u3046\u3060\u3063\u305f\u3051\uff1f\u300d\u3068\u601d\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u3002 \u305d\u308c\u306f &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.capilano-fw.com\/?p=13683\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u3010\u4fdd\u5b58\u7248\u3011Canvas\u30fbdrawImage\u306e\u51683\u30d1\u30bf\u30fc\u30f3\u3092\u3058\u3063\u304f\u308a\u89e3\u8aac\uff01&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":14045,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[28],"class_list":["post-13683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-canvas"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/13683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13683"}],"version-history":[{"count":341,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/13683\/revisions"}],"predecessor-version":[{"id":14053,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/13683\/revisions\/14053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/14045"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}