[{"data":1,"prerenderedAt":4189},["ShallowReactive",2],{"article-js-canvas-wave":3},{"id":4,"title":5,"body":6,"category":4176,"createdAt":4178,"description":5,"extension":4179,"index":4180,"meta":4181,"navigation":529,"path":4182,"publish":529,"seo":4183,"series":4180,"seriesTitle":4180,"stem":4184,"tag":4185,"thumbnail":4187,"updatedAt":4178,"__hash__":4188},"articles\u002Farticles\u002Fjs-canvas-wave.md","画像下部が波でうねるアニメーションをcanvasで実装する",{"type":7,"value":8,"toc":4153},"minimark",[9,13,18,28,32,35,51,54,57,60,63,66,69,86,89,94,97,100,103,114,117,435,438,441,444,747,750,810,813,1009,1020,1033,1036,1041,1046,1054,1115,1118,1121,1147,1150,1217,1223,1230,1236,1239,1242,1248,1947,1950,1961,1964,1968,2079,2085,2089,2095,2411,2414,2434,2437,2440,2444,2512,2524,2530,2532,2535,2538,2541,2742,2745,2748,2762,2765,2779,2782,2785,2788,2826,2835,2845,2848,2850,2853,2863,2973,2983,2993,3033,3036,3039,4052,4055,4058,4127,4144,4147,4150],[10,11,12],"p",{},"こんにちはjunです。今日は以下のようなcanvasを用いたアニメーションを作っていきます。\nレスポンシブをとりあえず画像の一部をうねらせるだけであれば70行ほどのjsコードですみます。",[14,15],"image-render",{":src":16,":width":17},"'_mix\u002Fex01-768x299.png'","'100%'",[10,19,20,27],{},[21,22,26],"a",{"href":23,"rel":24},"https:\u002F\u002Fapps.jun-app.com\u002Fwave\u002F",[25],"nofollow","こちら","にて実際に動かしています。",[29,30,31],"h2",{"id":31},"必要な知識",[10,33,34],{},"細かい実装の説明にうつる前に今回用いる必要な知識と原理について確認します。以下の知識にある程度知見がある人はすっ飛ばしてください。",[36,37,38,42,45,48],"ul",{},[39,40,41],"li",{},"canvas要素",[39,43,44],{},"jsでcanvasを読み込む方法",[39,46,47],{},"jsでcanvasに画像を設定する方法",[39,49,50],{},"三角関数（超基礎）",[29,52,53],{"id":53},"canvasでのアニメーションの原理",[10,55,56],{},"実装サイトでも見ていただいと思いますが、きちんとアニメーションをしておりまた、動画を流しているわけではありません。このアニメーションはcanvas要素というものをjsで操作することで実装ができます。",[10,58,59],{},"画像を波打たせる方法は普通のimgタグやdivでは難しいです。柔軟に簡単に実装するためにcanvasを用います。",[10,61,62],{},"このcanvasでのアニメーションは実は見えないスピードで「画像を消しては、再描画、消して、再描画…」というのを行っています。また描画する画像は下部を透明な波線で消してから描画しています。また波が連なり、流れるように見せるために三角関数を用いて波型に消す箇所を計算しています。",[10,64,65],{},"ちょっとわかりにくいにので図にしてみます。",[14,67],{":src":68,":width":17},"'_mix\u002Fwave01.jpeg'",[36,70,71,74,77,80,83],{},[39,72,73],{},"canvasでは上図のオレンジ点で示した様な描画地点を座標で指定します。（１）",[39,75,76],{},"描画地点は数式を用いて指定できるので、波の部分は三角関数で座標を指定します。（２）",[39,78,79],{},"そして画像の端にたどり着いたら元の描画いちに戻る様にします。（３、４）",[39,81,82],{},"囲まれた部分の色などを指定できるので、透明化を行います。（５）",[39,84,85],{},"そしてすぐに画像を元に戻して、１〜５を再度行う。",[10,87,88],{},"また１〜６を繰り返すたびにsni(θ)のθを増やしていけば毎回異なる波がうねる様に見えます。この様にして波のアニメーションを実装します。",[90,91,93],"h3",{"id":92},"canvasって何","canvasって何？",[10,95,96],{},"canvasというのはHTML5で扱われる要素の一つであり、2次元図形・グラフィック・アニメーションをjavaScriptを用いて描画することができます。cssでは解決できない図形やアニメーションを実装することができます。数十年前だとflashが担っていたことをHTMLで行うような感じです。",[29,98,99],{"id":99},"canvasに画像を表示させる",[10,101,102],{},"ではまずはうねらせる画像をcanvas要素に表示させるところまで行います。今回は同階層に",[36,104,105,108,111],{},[39,106,107],{},"index.html",[39,109,110],{},"app.js",[39,112,113],{},"sample.jpg",[10,115,116],{},"を用意しておきます。sample.jpgは縦横比１：２にトリミングをしておきます。では作っていきましょう。まずは以下のように適当にHTMLを作っておきます。",[118,119,124],"pre",{"className":120,"code":121,"language":122,"meta":123,"style":123},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Ctitle>waving image\u003C\u002Ftitle>\n        \u003Cstyle>\n            *{\n                margin:0;\n                padding:0;\n            }\n            main{\n                background:rgb(240, 255, 255);;\n            }\n        \u003C\u002Fstyle>\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cmain>\n            \u003Ccanvas id=\"canvas\">\u003C\u002Fcanvas>\n        \u003C\u002Fmain>\n        \u003Cscript src=\".\u002Fapp.js\">\u003C\u002Fscript>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[125,126,127,147,157,168,194,216,226,236,253,265,271,279,310,315,325,335,345,355,382,391,417,426],"code",{"__ignoreMap":123},[128,129,132,136,140,144],"span",{"class":130,"line":131},"line",1,[128,133,135],{"class":134},"sAklC","\u003C!",[128,137,139],{"class":138},"s-wAU","DOCTYPE",[128,141,143],{"class":142},"sJ14y"," html",[128,145,146],{"class":134},">\n",[128,148,150,153,155],{"class":130,"line":149},2,[128,151,152],{"class":134},"\u003C",[128,154,122],{"class":138},[128,156,146],{"class":134},[128,158,160,163,166],{"class":130,"line":159},3,[128,161,162],{"class":134},"    \u003C",[128,164,165],{"class":138},"head",[128,167,146],{"class":134},[128,169,171,174,177,180,183,186,190,192],{"class":130,"line":170},4,[128,172,173],{"class":134},"        \u003C",[128,175,176],{"class":138},"meta",[128,178,179],{"class":142}," charset",[128,181,182],{"class":134},"=",[128,184,185],{"class":134},"\"",[128,187,189],{"class":188},"sfyAc","utf-8",[128,191,185],{"class":134},[128,193,146],{"class":134},[128,195,197,199,202,205,209,212,214],{"class":130,"line":196},5,[128,198,173],{"class":134},[128,200,201],{"class":138},"title",[128,203,204],{"class":134},">",[128,206,208],{"class":207},"s0W1g","waving image",[128,210,211],{"class":134},"\u003C\u002F",[128,213,201],{"class":138},[128,215,146],{"class":134},[128,217,219,221,224],{"class":130,"line":218},6,[128,220,173],{"class":134},[128,222,223],{"class":138},"style",[128,225,146],{"class":134},[128,227,229,233],{"class":130,"line":228},7,[128,230,232],{"class":231},"s5Dmg","            *",[128,234,235],{"class":134},"{\n",[128,237,239,243,246,250],{"class":130,"line":238},8,[128,240,242],{"class":241},"s6YsC","                margin",[128,244,245],{"class":134},":",[128,247,249],{"class":248},"sx098","0",[128,251,252],{"class":134},";\n",[128,254,256,259,261,263],{"class":130,"line":255},9,[128,257,258],{"class":241},"                padding",[128,260,245],{"class":134},[128,262,249],{"class":248},[128,264,252],{"class":134},[128,266,268],{"class":130,"line":267},10,[128,269,270],{"class":134},"            }\n",[128,272,274,277],{"class":130,"line":273},11,[128,275,276],{"class":231},"            main",[128,278,235],{"class":134},[128,280,282,285,287,291,294,297,300,303,305,307],{"class":130,"line":281},12,[128,283,284],{"class":241},"                background",[128,286,245],{"class":134},[128,288,290],{"class":289},"sdLwU","rgb",[128,292,293],{"class":134},"(",[128,295,296],{"class":248},"240",[128,298,299],{"class":134},",",[128,301,302],{"class":248}," 255",[128,304,299],{"class":134},[128,306,302],{"class":248},[128,308,309],{"class":134},");;\n",[128,311,313],{"class":130,"line":312},13,[128,314,270],{"class":134},[128,316,318,321,323],{"class":130,"line":317},14,[128,319,320],{"class":134},"        \u003C\u002F",[128,322,223],{"class":138},[128,324,146],{"class":134},[128,326,328,331,333],{"class":130,"line":327},15,[128,329,330],{"class":134},"    \u003C\u002F",[128,332,165],{"class":138},[128,334,146],{"class":134},[128,336,338,340,343],{"class":130,"line":337},16,[128,339,162],{"class":134},[128,341,342],{"class":138},"body",[128,344,146],{"class":134},[128,346,348,350,353],{"class":130,"line":347},17,[128,349,173],{"class":134},[128,351,352],{"class":138},"main",[128,354,146],{"class":134},[128,356,358,361,364,367,369,371,373,375,378,380],{"class":130,"line":357},18,[128,359,360],{"class":134},"            \u003C",[128,362,363],{"class":138},"canvas",[128,365,366],{"class":142}," id",[128,368,182],{"class":134},[128,370,185],{"class":134},[128,372,363],{"class":188},[128,374,185],{"class":134},[128,376,377],{"class":134},">\u003C\u002F",[128,379,363],{"class":138},[128,381,146],{"class":134},[128,383,385,387,389],{"class":130,"line":384},19,[128,386,320],{"class":134},[128,388,352],{"class":138},[128,390,146],{"class":134},[128,392,394,396,399,402,404,406,409,411,413,415],{"class":130,"line":393},20,[128,395,173],{"class":134},[128,397,398],{"class":138},"script",[128,400,401],{"class":142}," src",[128,403,182],{"class":134},[128,405,185],{"class":134},[128,407,408],{"class":188},".\u002Fapp.js",[128,410,185],{"class":134},[128,412,377],{"class":134},[128,414,398],{"class":138},[128,416,146],{"class":134},[128,418,420,422,424],{"class":130,"line":419},21,[128,421,330],{"class":134},[128,423,342],{"class":138},[128,425,146],{"class":134},[128,427,429,431,433],{"class":130,"line":428},22,[128,430,211],{"class":134},[128,432,122],{"class":138},[128,434,146],{"class":134},[10,436,437],{},"描画がされるcanvasを用意して、javascriptで拾えるようにidをつけておきましょう。あとは描画を実行するjsファイルをcanvasより後に書いておきます。",[90,439,440],{"id":440},"javascriptで描画対象のcanvasを設定",[10,442,443],{},"app.jsに以下のようにコードを書きます。",[118,445,449],{"className":446,"code":447,"language":448,"meta":123,"style":123},"language-javascript shiki shiki-themes material-theme-ocean","function initAnimation(){\n    var canvas = document.getElementById('canvas');\n    var ctx = canvas.getContext('2d');\n\n    var imagePath = ('.\u002Fsample.jpg');\n    var image = new Image();\n    image.src = imagePath;\n\n    canvas.width = Number(window.innerWidth);\n    canvas.height = Number(canvas.width\u002F2);\n    image.onload = function(){\n          ctx.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);\n    }\n}\n","javascript",[125,450,451,462,496,525,531,554,574,590,594,623,654,670,737,742],{"__ignoreMap":123},[128,452,453,456,459],{"class":130,"line":131},[128,454,455],{"class":142},"function",[128,457,458],{"class":289}," initAnimation",[128,460,461],{"class":134},"(){\n",[128,463,464,467,470,473,476,479,482,484,487,489,491,494],{"class":130,"line":149},[128,465,466],{"class":142},"    var",[128,468,469],{"class":207}," canvas",[128,471,472],{"class":134}," =",[128,474,475],{"class":207}," document",[128,477,478],{"class":134},".",[128,480,481],{"class":289},"getElementById",[128,483,293],{"class":138},[128,485,486],{"class":134},"'",[128,488,363],{"class":188},[128,490,486],{"class":134},[128,492,493],{"class":138},")",[128,495,252],{"class":134},[128,497,498,500,503,505,507,509,512,514,516,519,521,523],{"class":130,"line":159},[128,499,466],{"class":142},[128,501,502],{"class":207}," ctx",[128,504,472],{"class":134},[128,506,469],{"class":207},[128,508,478],{"class":134},[128,510,511],{"class":289},"getContext",[128,513,293],{"class":138},[128,515,486],{"class":134},[128,517,518],{"class":188},"2d",[128,520,486],{"class":134},[128,522,493],{"class":138},[128,524,252],{"class":134},[128,526,527],{"class":130,"line":170},[128,528,530],{"emptyLinePlaceholder":529},true,"\n",[128,532,533,535,538,540,543,545,548,550,552],{"class":130,"line":196},[128,534,466],{"class":142},[128,536,537],{"class":207}," imagePath",[128,539,472],{"class":134},[128,541,542],{"class":138}," (",[128,544,486],{"class":134},[128,546,547],{"class":188},".\u002Fsample.jpg",[128,549,486],{"class":134},[128,551,493],{"class":138},[128,553,252],{"class":134},[128,555,556,558,561,563,566,569,572],{"class":130,"line":218},[128,557,466],{"class":142},[128,559,560],{"class":207}," image",[128,562,472],{"class":134},[128,564,565],{"class":134}," new",[128,567,568],{"class":289}," Image",[128,570,571],{"class":138},"()",[128,573,252],{"class":134},[128,575,576,579,581,584,586,588],{"class":130,"line":228},[128,577,578],{"class":207},"    image",[128,580,478],{"class":134},[128,582,583],{"class":207},"src",[128,585,472],{"class":134},[128,587,537],{"class":207},[128,589,252],{"class":134},[128,591,592],{"class":130,"line":238},[128,593,530],{"emptyLinePlaceholder":529},[128,595,596,599,601,604,606,609,611,614,616,619,621],{"class":130,"line":255},[128,597,598],{"class":207},"    canvas",[128,600,478],{"class":134},[128,602,603],{"class":207},"width",[128,605,472],{"class":134},[128,607,608],{"class":289}," Number",[128,610,293],{"class":138},[128,612,613],{"class":207},"window",[128,615,478],{"class":134},[128,617,618],{"class":207},"innerWidth",[128,620,493],{"class":138},[128,622,252],{"class":134},[128,624,625,627,629,632,634,636,638,640,642,644,647,650,652],{"class":130,"line":267},[128,626,598],{"class":207},[128,628,478],{"class":134},[128,630,631],{"class":207},"height",[128,633,472],{"class":134},[128,635,608],{"class":289},[128,637,293],{"class":138},[128,639,363],{"class":207},[128,641,478],{"class":134},[128,643,603],{"class":207},[128,645,646],{"class":134},"\u002F",[128,648,649],{"class":248},"2",[128,651,493],{"class":138},[128,653,252],{"class":134},[128,655,656,658,660,663,665,668],{"class":130,"line":273},[128,657,578],{"class":207},[128,659,478],{"class":134},[128,661,662],{"class":289},"onload",[128,664,472],{"class":134},[128,666,667],{"class":142}," function",[128,669,461],{"class":134},[128,671,672,675,677,680,682,685,687,689,691,693,695,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735],{"class":130,"line":281},[128,673,674],{"class":207},"          ctx",[128,676,478],{"class":134},[128,678,679],{"class":289},"drawImage",[128,681,293],{"class":138},[128,683,684],{"class":207},"image",[128,686,299],{"class":134},[128,688,249],{"class":248},[128,690,299],{"class":134},[128,692,249],{"class":248},[128,694,299],{"class":134},[128,696,684],{"class":207},[128,698,478],{"class":134},[128,700,603],{"class":207},[128,702,299],{"class":134},[128,704,684],{"class":207},[128,706,478],{"class":134},[128,708,631],{"class":207},[128,710,299],{"class":134},[128,712,249],{"class":248},[128,714,299],{"class":134},[128,716,249],{"class":248},[128,718,299],{"class":134},[128,720,363],{"class":207},[128,722,478],{"class":134},[128,724,603],{"class":207},[128,726,299],{"class":134},[128,728,363],{"class":207},[128,730,478],{"class":134},[128,732,631],{"class":207},[128,734,493],{"class":138},[128,736,252],{"class":134},[128,738,739],{"class":130,"line":312},[128,740,741],{"class":134},"    }\n",[128,743,744],{"class":130,"line":317},[128,745,746],{"class":134},"}\n",[10,748,749],{},"この箇所ではHTMLからcanvas要素を指定して、jsを用いてcanvasの操作を行える様にするおまじないです。以降はこのctx(描画コンテキストインスタンス)に様々な指定を行います。",[118,751,753],{"className":446,"code":752,"language":448,"meta":123,"style":123},"var canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');\n",[125,754,755,783],{"__ignoreMap":123},[128,756,757,760,763,765,767,769,771,773,775,777,779,781],{"class":130,"line":131},[128,758,759],{"class":142},"var",[128,761,762],{"class":207}," canvas ",[128,764,182],{"class":134},[128,766,475],{"class":207},[128,768,478],{"class":134},[128,770,481],{"class":289},[128,772,293],{"class":207},[128,774,486],{"class":134},[128,776,363],{"class":188},[128,778,486],{"class":134},[128,780,493],{"class":207},[128,782,252],{"class":134},[128,784,785,787,790,792,794,796,798,800,802,804,806,808],{"class":130,"line":149},[128,786,759],{"class":142},[128,788,789],{"class":207}," ctx ",[128,791,182],{"class":134},[128,793,469],{"class":207},[128,795,478],{"class":134},[128,797,511],{"class":289},[128,799,293],{"class":207},[128,801,486],{"class":134},[128,803,518],{"class":188},[128,805,486],{"class":134},[128,807,493],{"class":207},[128,809,252],{"class":134},[10,811,812],{},"そして",[118,814,816],{"className":446,"code":815,"language":448,"meta":123,"style":123},"var imagePath = ('.\u002Fsample.jpg');\nvar image = new Image();\nimage.src = imagePath;\n\ncanvas.width = Number(window.innerWidth);\ncanvas.height = Number(canvas.width\u002F2);\nimage.onload = function(){\n        ctx.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);\n}\n",[125,817,818,839,856,871,875,898,926,940,1005],{"__ignoreMap":123},[128,819,820,822,825,827,829,831,833,835,837],{"class":130,"line":131},[128,821,759],{"class":142},[128,823,824],{"class":207}," imagePath ",[128,826,182],{"class":134},[128,828,542],{"class":207},[128,830,486],{"class":134},[128,832,547],{"class":188},[128,834,486],{"class":134},[128,836,493],{"class":207},[128,838,252],{"class":134},[128,840,841,843,846,848,850,852,854],{"class":130,"line":149},[128,842,759],{"class":142},[128,844,845],{"class":207}," image ",[128,847,182],{"class":134},[128,849,565],{"class":134},[128,851,568],{"class":289},[128,853,571],{"class":207},[128,855,252],{"class":134},[128,857,858,860,862,865,867,869],{"class":130,"line":159},[128,859,684],{"class":207},[128,861,478],{"class":134},[128,863,864],{"class":207},"src ",[128,866,182],{"class":134},[128,868,537],{"class":207},[128,870,252],{"class":134},[128,872,873],{"class":130,"line":170},[128,874,530],{"emptyLinePlaceholder":529},[128,876,877,879,881,884,886,888,891,893,896],{"class":130,"line":196},[128,878,363],{"class":207},[128,880,478],{"class":134},[128,882,883],{"class":207},"width ",[128,885,182],{"class":134},[128,887,608],{"class":289},[128,889,890],{"class":207},"(window",[128,892,478],{"class":134},[128,894,895],{"class":207},"innerWidth)",[128,897,252],{"class":134},[128,899,900,902,904,907,909,911,914,916,918,920,922,924],{"class":130,"line":218},[128,901,363],{"class":207},[128,903,478],{"class":134},[128,905,906],{"class":207},"height ",[128,908,182],{"class":134},[128,910,608],{"class":289},[128,912,913],{"class":207},"(canvas",[128,915,478],{"class":134},[128,917,603],{"class":207},[128,919,646],{"class":134},[128,921,649],{"class":248},[128,923,493],{"class":207},[128,925,252],{"class":134},[128,927,928,930,932,934,936,938],{"class":130,"line":228},[128,929,684],{"class":207},[128,931,478],{"class":134},[128,933,662],{"class":289},[128,935,472],{"class":134},[128,937,667],{"class":142},[128,939,461],{"class":134},[128,941,942,945,947,949,951,953,955,957,959,961,963,965,967,969,971,973,975,977,979,981,983,985,987,989,991,993,995,997,999,1001,1003],{"class":130,"line":238},[128,943,944],{"class":207},"        ctx",[128,946,478],{"class":134},[128,948,679],{"class":289},[128,950,293],{"class":138},[128,952,684],{"class":207},[128,954,299],{"class":134},[128,956,249],{"class":248},[128,958,299],{"class":134},[128,960,249],{"class":248},[128,962,299],{"class":134},[128,964,684],{"class":207},[128,966,478],{"class":134},[128,968,603],{"class":207},[128,970,299],{"class":134},[128,972,684],{"class":207},[128,974,478],{"class":134},[128,976,631],{"class":207},[128,978,299],{"class":134},[128,980,249],{"class":248},[128,982,299],{"class":134},[128,984,249],{"class":248},[128,986,299],{"class":134},[128,988,363],{"class":207},[128,990,478],{"class":134},[128,992,603],{"class":207},[128,994,299],{"class":134},[128,996,363],{"class":207},[128,998,478],{"class":134},[128,1000,631],{"class":207},[128,1002,493],{"class":138},[128,1004,252],{"class":134},[128,1006,1007],{"class":130,"line":255},[128,1008,746],{"class":134},[10,1010,1011,1012,1015,1016,1019],{},"jsのImageオブジェクトを用いてsrcプロパティに映す画像のパスを入れます。",[125,1013,1014],{},"canvas.width","、",[125,1017,1018],{},"canvas.height","でcanvasの大きさを指定します。画像が縦横１：２なので canvasもその比率に沿う様にしました。",[10,1021,1022,1025,1026,1029,1030,1032],{},[125,1023,1024],{},"image.onload"," を用いてsrcで指定した画像の読み込みが終わったら、\n",[125,1027,1028],{},"drawImage()"," メソッドを用いてcanvasに画像を描画する様にします。\n",[125,1031,1024],{}," を使わないと画像が読み込まれる前に描画しようとするので、映されません。",[10,1034,1035],{},"とりあえずここまでくると、canvas要素しかないHTMLにもかかわらず、以下の様に画像が描画されているはずです。",[14,1037],{":src":1038,":width":1039,":center":1040},"'_mix\u002Fwave02.png'","'500px'","true",[1042,1043,1045],"h4",{"id":1044},"drawimageの使い方","drawImage()の使い方",[10,1047,1048,1049],{},"drawImage()はcanvasに範囲を指定して画像を描画します。canvas全体に画像を描画するならば必ず、最後の引数まで入力したほうがいいです。",[21,1050,1053],{"href":1051,"rel":1052},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FdrawImage",[25],"（MDNの解説（英語））",[118,1055,1057],{"className":446,"code":1056,"language":448,"meta":123,"style":123},"void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);\n",[125,1058,1059],{"__ignoreMap":123},[128,1060,1061,1064,1066,1068,1070,1073,1075,1078,1080,1083,1085,1088,1090,1093,1095,1098,1100,1103,1105,1108,1110,1113],{"class":130,"line":131},[128,1062,1063],{"class":134},"void",[128,1065,502],{"class":207},[128,1067,478],{"class":134},[128,1069,679],{"class":289},[128,1071,1072],{"class":207},"(image",[128,1074,299],{"class":134},[128,1076,1077],{"class":207}," sx",[128,1079,299],{"class":134},[128,1081,1082],{"class":207}," sy",[128,1084,299],{"class":134},[128,1086,1087],{"class":207}," sWidth",[128,1089,299],{"class":134},[128,1091,1092],{"class":207}," sHeight",[128,1094,299],{"class":134},[128,1096,1097],{"class":207}," dx",[128,1099,299],{"class":134},[128,1101,1102],{"class":207}," dy",[128,1104,299],{"class":134},[128,1106,1107],{"class":207}," dWidth",[128,1109,299],{"class":134},[128,1111,1112],{"class":207}," dHeight)",[128,1114,252],{"class":134},[10,1116,1117],{},"それぞれの引数を説明すると",[10,1119,1120],{},"Imageインスタンス。つまり描画する対象の画像",[1122,1123,1124,1127,1130,1133,1136,1139,1141,1144],"ol",{},[39,1125,1126],{},"画像の切り抜き開始地点のX座標",[39,1128,1129],{},"画像の切り抜き開始地点のY座標",[39,1131,1132],{},"第２引数で指定したX座標から切り抜くX方向の距離（幅）",[39,1134,1135],{},"第３引数で指定したY座標から切り抜くY方向の距離（高さ）",[39,1137,1138],{},"canvasに描画する開始地点のX座標",[39,1140,1138],{},[39,1142,1143],{},"第６引数で指定したX座標から描画するX方向の距離（幅）",[39,1145,1146],{},"第７引数で指定したY座標から描画するY方向の距離（高さ）",[10,1148,1149],{},"という感じです！私の今回の例でいくと",[118,1151,1153],{"className":446,"code":1152,"language":448,"meta":123,"style":123},"ctx.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);\n",[125,1154,1155],{"__ignoreMap":123},[128,1156,1157,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1215],{"class":130,"line":131},[128,1158,1159],{"class":207},"ctx",[128,1161,478],{"class":134},[128,1163,679],{"class":289},[128,1165,1072],{"class":207},[128,1167,299],{"class":134},[128,1169,249],{"class":248},[128,1171,299],{"class":134},[128,1173,249],{"class":248},[128,1175,299],{"class":134},[128,1177,684],{"class":207},[128,1179,478],{"class":134},[128,1181,603],{"class":207},[128,1183,299],{"class":134},[128,1185,684],{"class":207},[128,1187,478],{"class":134},[128,1189,631],{"class":207},[128,1191,299],{"class":134},[128,1193,249],{"class":248},[128,1195,299],{"class":134},[128,1197,249],{"class":248},[128,1199,299],{"class":134},[128,1201,363],{"class":207},[128,1203,478],{"class":134},[128,1205,603],{"class":207},[128,1207,299],{"class":134},[128,1209,363],{"class":207},[128,1211,478],{"class":134},[128,1213,1214],{"class":207},"height)",[128,1216,252],{"class":134},[10,1218,1219,1222],{},[125,1220,1221],{},"0,0,image.width,image.height",", で画像の（０,０）座標地点から画像の幅と高さ分、画像を切り取るという意味です。つまり画像全体を読み取っているのと同じです。",[10,1224,1225,1226,1229],{},"もし",[125,1227,1228],{},"0,0,image.width\u002F2,image.height\u002F2",", としたら元画像の1\u002F4だけの部分切り取られた画像が映し出されます。",[10,1231,1232,1235],{},[125,1233,1234],{},"0,0,canvas.width,canvas.height"," ここもcanvasの（０,０）座標地点からcanvasの幅と高さ分、画像を貼り付けるという意味です。つまりcanvas全体に画像を貼り付けるのと同じです。",[10,1237,1238],{},"ここは実際にコードを描いて比率をいじって見てください。そうすればここの意味がわかる様になります。",[29,1240,1241],{"id":1241},"波線に画像を切り抜く",[10,1243,1244,1245,1247],{},"それでは次にこの画像を波線に切り抜きます。切り抜きのイメージとしては上で説明した図の様に、一辺が波線の四角形を描いて、透明に塗り潰します。",[125,1246,1024],{},"以降に以下のコードを加えます。",[118,1249,1251],{"className":446,"code":1250,"language":448,"meta":123,"style":123},"image.onload = function(){\n    initDraw();\n}\n    \nvar canvasEndX = canvas.width;\nvar canvasEndY = canvas.height;\nvar waveStartPoint = canvasEndY-150;\n\nvar amplitude = 30;\nvar period = 1000;\nvar degree = 0;\n\nfunction initDraw(){\n    imageSet(image,canvasEndX,canvasEndY);\n    waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n}\n\nfunction imageSet(imageObj,canvasEndX,canvasEndY){\n    var imgWidth = imageObj.width;\n    var imgHeight = imageObj.height;\n    ctx.drawImage(image,0,0,imgWidth,imgHeight,0,0,canvasEndX,canvasEndY);\n}\n\nfunction waveDrawing(waveStartPoint,canvasEndX,canvasEndY,deg,am,tp){\n    var waveStartY = waveStartPoint;\n    ctx.globalCompositeOperation = \"destination-out\";\n    ctx.beginPath();\n    ctx.moveTo(0, waveStartY);\n\n    for (var x=0; x \u003C= canvasEndX; x+= 1) {\n        var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));\n        ctx.lineTo(x, y+waveStartY);\n    }\n\n    ctx.lineTo(canvasEndX,canvasEndY);\n    ctx.lineTo(0,canvasEndY);\n    ctx.closePath();\n\n    　ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\n    ctx.fill();\n}\n",[125,1252,1253,1267,1276,1280,1285,1302,1319,1339,1343,1357,1371,1385,1389,1398,1421,1458,1462,1466,1490,1508,1525,1576,1580,1585,1622,1637,1659,1673,1695,1700,1744,1804,1831,1836,1841,1862,1883,1897,1902,1928,1942],{"__ignoreMap":123},[128,1254,1255,1257,1259,1261,1263,1265],{"class":130,"line":131},[128,1256,684],{"class":207},[128,1258,478],{"class":134},[128,1260,662],{"class":289},[128,1262,472],{"class":134},[128,1264,667],{"class":142},[128,1266,461],{"class":134},[128,1268,1269,1272,1274],{"class":130,"line":149},[128,1270,1271],{"class":289},"    initDraw",[128,1273,571],{"class":138},[128,1275,252],{"class":134},[128,1277,1278],{"class":130,"line":159},[128,1279,746],{"class":134},[128,1281,1282],{"class":130,"line":170},[128,1283,1284],{"class":207},"    \n",[128,1286,1287,1289,1292,1294,1296,1298,1300],{"class":130,"line":196},[128,1288,759],{"class":142},[128,1290,1291],{"class":207}," canvasEndX ",[128,1293,182],{"class":134},[128,1295,469],{"class":207},[128,1297,478],{"class":134},[128,1299,603],{"class":207},[128,1301,252],{"class":134},[128,1303,1304,1306,1309,1311,1313,1315,1317],{"class":130,"line":218},[128,1305,759],{"class":142},[128,1307,1308],{"class":207}," canvasEndY ",[128,1310,182],{"class":134},[128,1312,469],{"class":207},[128,1314,478],{"class":134},[128,1316,631],{"class":207},[128,1318,252],{"class":134},[128,1320,1321,1323,1326,1328,1331,1334,1337],{"class":130,"line":228},[128,1322,759],{"class":142},[128,1324,1325],{"class":207}," waveStartPoint ",[128,1327,182],{"class":134},[128,1329,1330],{"class":207}," canvasEndY",[128,1332,1333],{"class":134},"-",[128,1335,1336],{"class":248},"150",[128,1338,252],{"class":134},[128,1340,1341],{"class":130,"line":238},[128,1342,530],{"emptyLinePlaceholder":529},[128,1344,1345,1347,1350,1352,1355],{"class":130,"line":255},[128,1346,759],{"class":142},[128,1348,1349],{"class":207}," amplitude ",[128,1351,182],{"class":134},[128,1353,1354],{"class":248}," 30",[128,1356,252],{"class":134},[128,1358,1359,1361,1364,1366,1369],{"class":130,"line":267},[128,1360,759],{"class":142},[128,1362,1363],{"class":207}," period ",[128,1365,182],{"class":134},[128,1367,1368],{"class":248}," 1000",[128,1370,252],{"class":134},[128,1372,1373,1375,1378,1380,1383],{"class":130,"line":273},[128,1374,759],{"class":142},[128,1376,1377],{"class":207}," degree ",[128,1379,182],{"class":134},[128,1381,1382],{"class":248}," 0",[128,1384,252],{"class":134},[128,1386,1387],{"class":130,"line":281},[128,1388,530],{"emptyLinePlaceholder":529},[128,1390,1391,1393,1396],{"class":130,"line":312},[128,1392,455],{"class":142},[128,1394,1395],{"class":289}," initDraw",[128,1397,461],{"class":134},[128,1399,1400,1403,1405,1407,1409,1412,1414,1417,1419],{"class":130,"line":317},[128,1401,1402],{"class":289},"    imageSet",[128,1404,293],{"class":138},[128,1406,684],{"class":207},[128,1408,299],{"class":134},[128,1410,1411],{"class":207},"canvasEndX",[128,1413,299],{"class":134},[128,1415,1416],{"class":207},"canvasEndY",[128,1418,493],{"class":138},[128,1420,252],{"class":134},[128,1422,1423,1426,1428,1431,1433,1435,1437,1439,1441,1444,1446,1449,1451,1454,1456],{"class":130,"line":327},[128,1424,1425],{"class":289},"    waveDrawing",[128,1427,293],{"class":138},[128,1429,1430],{"class":207},"waveStartPoint",[128,1432,299],{"class":134},[128,1434,1411],{"class":207},[128,1436,299],{"class":134},[128,1438,1416],{"class":207},[128,1440,299],{"class":134},[128,1442,1443],{"class":207},"degree",[128,1445,299],{"class":134},[128,1447,1448],{"class":207},"amplitude",[128,1450,299],{"class":134},[128,1452,1453],{"class":207},"period",[128,1455,493],{"class":138},[128,1457,252],{"class":134},[128,1459,1460],{"class":130,"line":337},[128,1461,746],{"class":134},[128,1463,1464],{"class":130,"line":347},[128,1465,530],{"emptyLinePlaceholder":529},[128,1467,1468,1470,1473,1475,1479,1481,1483,1485,1487],{"class":130,"line":357},[128,1469,455],{"class":142},[128,1471,1472],{"class":289}," imageSet",[128,1474,293],{"class":134},[128,1476,1478],{"class":1477},"s7ZW3","imageObj",[128,1480,299],{"class":134},[128,1482,1411],{"class":1477},[128,1484,299],{"class":134},[128,1486,1416],{"class":1477},[128,1488,1489],{"class":134},"){\n",[128,1491,1492,1494,1497,1499,1502,1504,1506],{"class":130,"line":384},[128,1493,466],{"class":142},[128,1495,1496],{"class":207}," imgWidth",[128,1498,472],{"class":134},[128,1500,1501],{"class":207}," imageObj",[128,1503,478],{"class":134},[128,1505,603],{"class":207},[128,1507,252],{"class":134},[128,1509,1510,1512,1515,1517,1519,1521,1523],{"class":130,"line":393},[128,1511,466],{"class":142},[128,1513,1514],{"class":207}," imgHeight",[128,1516,472],{"class":134},[128,1518,1501],{"class":207},[128,1520,478],{"class":134},[128,1522,631],{"class":207},[128,1524,252],{"class":134},[128,1526,1527,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1551,1553,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574],{"class":130,"line":419},[128,1528,1529],{"class":207},"    ctx",[128,1531,478],{"class":134},[128,1533,679],{"class":289},[128,1535,293],{"class":138},[128,1537,684],{"class":207},[128,1539,299],{"class":134},[128,1541,249],{"class":248},[128,1543,299],{"class":134},[128,1545,249],{"class":248},[128,1547,299],{"class":134},[128,1549,1550],{"class":207},"imgWidth",[128,1552,299],{"class":134},[128,1554,1555],{"class":207},"imgHeight",[128,1557,299],{"class":134},[128,1559,249],{"class":248},[128,1561,299],{"class":134},[128,1563,249],{"class":248},[128,1565,299],{"class":134},[128,1567,1411],{"class":207},[128,1569,299],{"class":134},[128,1571,1416],{"class":207},[128,1573,493],{"class":138},[128,1575,252],{"class":134},[128,1577,1578],{"class":130,"line":428},[128,1579,746],{"class":134},[128,1581,1583],{"class":130,"line":1582},23,[128,1584,530],{"emptyLinePlaceholder":529},[128,1586,1588,1590,1593,1595,1597,1599,1601,1603,1605,1607,1610,1612,1615,1617,1620],{"class":130,"line":1587},24,[128,1589,455],{"class":142},[128,1591,1592],{"class":289}," waveDrawing",[128,1594,293],{"class":134},[128,1596,1430],{"class":1477},[128,1598,299],{"class":134},[128,1600,1411],{"class":1477},[128,1602,299],{"class":134},[128,1604,1416],{"class":1477},[128,1606,299],{"class":134},[128,1608,1609],{"class":1477},"deg",[128,1611,299],{"class":134},[128,1613,1614],{"class":1477},"am",[128,1616,299],{"class":134},[128,1618,1619],{"class":1477},"tp",[128,1621,1489],{"class":134},[128,1623,1625,1627,1630,1632,1635],{"class":130,"line":1624},25,[128,1626,466],{"class":142},[128,1628,1629],{"class":207}," waveStartY",[128,1631,472],{"class":134},[128,1633,1634],{"class":207}," waveStartPoint",[128,1636,252],{"class":134},[128,1638,1640,1642,1644,1647,1649,1652,1655,1657],{"class":130,"line":1639},26,[128,1641,1529],{"class":207},[128,1643,478],{"class":134},[128,1645,1646],{"class":207},"globalCompositeOperation",[128,1648,472],{"class":134},[128,1650,1651],{"class":134}," \"",[128,1653,1654],{"class":188},"destination-out",[128,1656,185],{"class":134},[128,1658,252],{"class":134},[128,1660,1662,1664,1666,1669,1671],{"class":130,"line":1661},27,[128,1663,1529],{"class":207},[128,1665,478],{"class":134},[128,1667,1668],{"class":289},"beginPath",[128,1670,571],{"class":138},[128,1672,252],{"class":134},[128,1674,1676,1678,1680,1683,1685,1687,1689,1691,1693],{"class":130,"line":1675},28,[128,1677,1529],{"class":207},[128,1679,478],{"class":134},[128,1681,1682],{"class":289},"moveTo",[128,1684,293],{"class":138},[128,1686,249],{"class":248},[128,1688,299],{"class":134},[128,1690,1629],{"class":207},[128,1692,493],{"class":138},[128,1694,252],{"class":134},[128,1696,1698],{"class":130,"line":1697},29,[128,1699,530],{"emptyLinePlaceholder":529},[128,1701,1703,1707,1709,1711,1714,1716,1718,1721,1723,1726,1729,1731,1733,1736,1739,1742],{"class":130,"line":1702},30,[128,1704,1706],{"class":1705},"s6cf3","    for",[128,1708,542],{"class":138},[128,1710,759],{"class":142},[128,1712,1713],{"class":207}," x",[128,1715,182],{"class":134},[128,1717,249],{"class":248},[128,1719,1720],{"class":134},";",[128,1722,1713],{"class":207},[128,1724,1725],{"class":134}," \u003C=",[128,1727,1728],{"class":207}," canvasEndX",[128,1730,1720],{"class":134},[128,1732,1713],{"class":207},[128,1734,1735],{"class":134},"+=",[128,1737,1738],{"class":248}," 1",[128,1740,1741],{"class":138},") ",[128,1743,235],{"class":134},[128,1745,1747,1750,1753,1755,1758,1760,1763,1766,1768,1771,1774,1776,1778,1781,1783,1785,1787,1789,1791,1793,1796,1799,1802],{"class":130,"line":1746},31,[128,1748,1749],{"class":142},"        var",[128,1751,1752],{"class":207}," y",[128,1754,472],{"class":134},[128,1756,1757],{"class":134}," -",[128,1759,1614],{"class":207},[128,1761,1762],{"class":134},"*",[128,1764,1765],{"class":207},"Math",[128,1767,478],{"class":134},[128,1769,1770],{"class":289},"sin",[128,1772,1773],{"class":138},"((",[128,1775,1765],{"class":207},[128,1777,478],{"class":134},[128,1779,1780],{"class":207},"PI",[128,1782,646],{"class":134},[128,1784,1619],{"class":207},[128,1786,493],{"class":138},[128,1788,1762],{"class":134},[128,1790,293],{"class":138},[128,1792,1609],{"class":207},[128,1794,1795],{"class":134},"+",[128,1797,1798],{"class":207},"x",[128,1800,1801],{"class":138},"))",[128,1803,252],{"class":134},[128,1805,1807,1809,1811,1814,1816,1818,1820,1822,1824,1827,1829],{"class":130,"line":1806},32,[128,1808,944],{"class":207},[128,1810,478],{"class":134},[128,1812,1813],{"class":289},"lineTo",[128,1815,293],{"class":138},[128,1817,1798],{"class":207},[128,1819,299],{"class":134},[128,1821,1752],{"class":207},[128,1823,1795],{"class":134},[128,1825,1826],{"class":207},"waveStartY",[128,1828,493],{"class":138},[128,1830,252],{"class":134},[128,1832,1834],{"class":130,"line":1833},33,[128,1835,741],{"class":134},[128,1837,1839],{"class":130,"line":1838},34,[128,1840,530],{"emptyLinePlaceholder":529},[128,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860],{"class":130,"line":1843},35,[128,1845,1529],{"class":207},[128,1847,478],{"class":134},[128,1849,1813],{"class":289},[128,1851,293],{"class":138},[128,1853,1411],{"class":207},[128,1855,299],{"class":134},[128,1857,1416],{"class":207},[128,1859,493],{"class":138},[128,1861,252],{"class":134},[128,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881],{"class":130,"line":1864},36,[128,1866,1529],{"class":207},[128,1868,478],{"class":134},[128,1870,1813],{"class":289},[128,1872,293],{"class":138},[128,1874,249],{"class":248},[128,1876,299],{"class":134},[128,1878,1416],{"class":207},[128,1880,493],{"class":138},[128,1882,252],{"class":134},[128,1884,1886,1888,1890,1893,1895],{"class":130,"line":1885},37,[128,1887,1529],{"class":207},[128,1889,478],{"class":134},[128,1891,1892],{"class":289},"closePath",[128,1894,571],{"class":138},[128,1896,252],{"class":134},[128,1898,1900],{"class":130,"line":1899},38,[128,1901,530],{"emptyLinePlaceholder":529},[128,1903,1905,1908,1910,1913,1915,1917,1920,1922,1924],{"class":130,"line":1904},39,[128,1906,1907],{"class":207},"    　ctx",[128,1909,478],{"class":134},[128,1911,1912],{"class":207},"fillStyle",[128,1914,472],{"class":134},[128,1916,1651],{"class":134},[128,1918,1919],{"class":188},"rgba(255,255,255,1)",[128,1921,185],{"class":134},[128,1923,1720],{"class":134},[128,1925,1927],{"class":1926},"sC9rS"," \u002F\u002Fopacity 1\n",[128,1929,1931,1933,1935,1938,1940],{"class":130,"line":1930},40,[128,1932,1529],{"class":207},[128,1934,478],{"class":134},[128,1936,1937],{"class":289},"fill",[128,1939,571],{"class":138},[128,1941,252],{"class":134},[128,1943,1945],{"class":130,"line":1944},41,[128,1946,746],{"class":134},[10,1948,1949],{},"ここでは３つの関数を作成します。",[36,1951,1952,1955,1958],{},[39,1953,1954],{},"initDraw()：初期の波線くりぬき画像を描画する。",[39,1956,1957],{},"imageSet()：画像をキャンバスに描画する。またすでに画像がある場合はそれをクリアする。",[39,1959,1960],{},"waveDrawing()：画像を波線にくり抜く。",[10,1962,1963],{},"それぞれを解説していきます。",[90,1965,1967],{"id":1966},"imageset-で画像を描画","imageSet() で画像を描画",[118,1969,1971],{"className":446,"code":1970,"language":448,"meta":123,"style":123},"function imageSet(imageObj,canvasEndX,canvasEndY){\n     var imgWidth = imageObj.width;\n     var imgHeight = imageObj.height;\n     ctx.drawImage(image,0,0,imgWidth,imgHeight,0,0,canvasEndX,canvasEndY);\n}\n",[125,1972,1973,1993,2010,2026,2075],{"__ignoreMap":123},[128,1974,1975,1977,1979,1981,1983,1985,1987,1989,1991],{"class":130,"line":131},[128,1976,455],{"class":142},[128,1978,1472],{"class":289},[128,1980,293],{"class":134},[128,1982,1478],{"class":1477},[128,1984,299],{"class":134},[128,1986,1411],{"class":1477},[128,1988,299],{"class":134},[128,1990,1416],{"class":1477},[128,1992,1489],{"class":134},[128,1994,1995,1998,2000,2002,2004,2006,2008],{"class":130,"line":149},[128,1996,1997],{"class":142},"     var",[128,1999,1496],{"class":207},[128,2001,472],{"class":134},[128,2003,1501],{"class":207},[128,2005,478],{"class":134},[128,2007,603],{"class":207},[128,2009,252],{"class":134},[128,2011,2012,2014,2016,2018,2020,2022,2024],{"class":130,"line":159},[128,2013,1997],{"class":142},[128,2015,1514],{"class":207},[128,2017,472],{"class":134},[128,2019,1501],{"class":207},[128,2021,478],{"class":134},[128,2023,631],{"class":207},[128,2025,252],{"class":134},[128,2027,2028,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073],{"class":130,"line":170},[128,2029,2030],{"class":207},"     ctx",[128,2032,478],{"class":134},[128,2034,679],{"class":289},[128,2036,293],{"class":138},[128,2038,684],{"class":207},[128,2040,299],{"class":134},[128,2042,249],{"class":248},[128,2044,299],{"class":134},[128,2046,249],{"class":248},[128,2048,299],{"class":134},[128,2050,1550],{"class":207},[128,2052,299],{"class":134},[128,2054,1555],{"class":207},[128,2056,299],{"class":134},[128,2058,249],{"class":248},[128,2060,299],{"class":134},[128,2062,249],{"class":248},[128,2064,299],{"class":134},[128,2066,1411],{"class":207},[128,2068,299],{"class":134},[128,2070,1416],{"class":207},[128,2072,493],{"class":138},[128,2074,252],{"class":134},[128,2076,2077],{"class":130,"line":196},[128,2078,746],{"class":134},[10,2080,2081,2082,2084],{},"この関数は単に画像を描画するだけです。引数に画像オブジェクトとキャンバスの幅・高さ情報をとり、先ほども説明した",[125,2083,1028],{},"を用いてキャンバスに画像を描画します。",[90,2086,2088],{"id":2087},"wavedrawingで波線くりぬきをする","waveDrawing()で波線くりぬきをする",[10,2090,2091,2094],{},[125,2092,2093],{},"waveDrawing()","という関数で波線のくりぬき処理をかいていきます。",[118,2096,2098],{"className":446,"code":2097,"language":448,"meta":123,"style":123},"function waveDrawing(waveStartPoint,canvasEndX,canvasEndY,deg,am,tp){\n      var waveStartY = waveStartPoint;\n      ctx.globalCompositeOperation = \"destination-out\";\n      ctx.beginPath();\n      ctx.moveTo(0, waveStartY);\n\n      for (var x=0; x \u003C= canvasEndX; x+= 1) {\n           var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));;\n           ctx.lineTo(x, y+waveStartY);\n      }\n\n      ctx.lineTo(canvasEndX,canvasEndY);\n      ctx.lineTo(0,canvasEndY);\n      ctx.closePath();\n\n      ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\n      ctx.fill();\n}\n",[125,2099,2100,2132,2145,2164,2176,2196,2200,2235,2285,2310,2315,2319,2339,2359,2371,2375,2395,2407],{"__ignoreMap":123},[128,2101,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130],{"class":130,"line":131},[128,2103,455],{"class":142},[128,2105,1592],{"class":289},[128,2107,293],{"class":134},[128,2109,1430],{"class":1477},[128,2111,299],{"class":134},[128,2113,1411],{"class":1477},[128,2115,299],{"class":134},[128,2117,1416],{"class":1477},[128,2119,299],{"class":134},[128,2121,1609],{"class":1477},[128,2123,299],{"class":134},[128,2125,1614],{"class":1477},[128,2127,299],{"class":134},[128,2129,1619],{"class":1477},[128,2131,1489],{"class":134},[128,2133,2134,2137,2139,2141,2143],{"class":130,"line":149},[128,2135,2136],{"class":142},"      var",[128,2138,1629],{"class":207},[128,2140,472],{"class":134},[128,2142,1634],{"class":207},[128,2144,252],{"class":134},[128,2146,2147,2150,2152,2154,2156,2158,2160,2162],{"class":130,"line":159},[128,2148,2149],{"class":207},"      ctx",[128,2151,478],{"class":134},[128,2153,1646],{"class":207},[128,2155,472],{"class":134},[128,2157,1651],{"class":134},[128,2159,1654],{"class":188},[128,2161,185],{"class":134},[128,2163,252],{"class":134},[128,2165,2166,2168,2170,2172,2174],{"class":130,"line":170},[128,2167,2149],{"class":207},[128,2169,478],{"class":134},[128,2171,1668],{"class":289},[128,2173,571],{"class":138},[128,2175,252],{"class":134},[128,2177,2178,2180,2182,2184,2186,2188,2190,2192,2194],{"class":130,"line":196},[128,2179,2149],{"class":207},[128,2181,478],{"class":134},[128,2183,1682],{"class":289},[128,2185,293],{"class":138},[128,2187,249],{"class":248},[128,2189,299],{"class":134},[128,2191,1629],{"class":207},[128,2193,493],{"class":138},[128,2195,252],{"class":134},[128,2197,2198],{"class":130,"line":218},[128,2199,530],{"emptyLinePlaceholder":529},[128,2201,2202,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225,2227,2229,2231,2233],{"class":130,"line":228},[128,2203,2204],{"class":1705},"      for",[128,2206,542],{"class":138},[128,2208,759],{"class":142},[128,2210,1713],{"class":207},[128,2212,182],{"class":134},[128,2214,249],{"class":248},[128,2216,1720],{"class":134},[128,2218,1713],{"class":207},[128,2220,1725],{"class":134},[128,2222,1728],{"class":207},[128,2224,1720],{"class":134},[128,2226,1713],{"class":207},[128,2228,1735],{"class":134},[128,2230,1738],{"class":248},[128,2232,1741],{"class":138},[128,2234,235],{"class":134},[128,2236,2237,2240,2242,2244,2246,2248,2250,2252,2254,2256,2258,2260,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282],{"class":130,"line":238},[128,2238,2239],{"class":142},"           var",[128,2241,1752],{"class":207},[128,2243,472],{"class":134},[128,2245,1757],{"class":134},[128,2247,1614],{"class":207},[128,2249,1762],{"class":134},[128,2251,1765],{"class":207},[128,2253,478],{"class":134},[128,2255,1770],{"class":289},[128,2257,1773],{"class":138},[128,2259,1765],{"class":207},[128,2261,478],{"class":134},[128,2263,1780],{"class":207},[128,2265,646],{"class":134},[128,2267,1619],{"class":207},[128,2269,493],{"class":138},[128,2271,1762],{"class":134},[128,2273,293],{"class":138},[128,2275,1609],{"class":207},[128,2277,1795],{"class":134},[128,2279,1798],{"class":207},[128,2281,1801],{"class":138},[128,2283,2284],{"class":134},";;\n",[128,2286,2287,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308],{"class":130,"line":255},[128,2288,2289],{"class":207},"           ctx",[128,2291,478],{"class":134},[128,2293,1813],{"class":289},[128,2295,293],{"class":138},[128,2297,1798],{"class":207},[128,2299,299],{"class":134},[128,2301,1752],{"class":207},[128,2303,1795],{"class":134},[128,2305,1826],{"class":207},[128,2307,493],{"class":138},[128,2309,252],{"class":134},[128,2311,2312],{"class":130,"line":267},[128,2313,2314],{"class":134},"      }\n",[128,2316,2317],{"class":130,"line":273},[128,2318,530],{"emptyLinePlaceholder":529},[128,2320,2321,2323,2325,2327,2329,2331,2333,2335,2337],{"class":130,"line":281},[128,2322,2149],{"class":207},[128,2324,478],{"class":134},[128,2326,1813],{"class":289},[128,2328,293],{"class":138},[128,2330,1411],{"class":207},[128,2332,299],{"class":134},[128,2334,1416],{"class":207},[128,2336,493],{"class":138},[128,2338,252],{"class":134},[128,2340,2341,2343,2345,2347,2349,2351,2353,2355,2357],{"class":130,"line":312},[128,2342,2149],{"class":207},[128,2344,478],{"class":134},[128,2346,1813],{"class":289},[128,2348,293],{"class":138},[128,2350,249],{"class":248},[128,2352,299],{"class":134},[128,2354,1416],{"class":207},[128,2356,493],{"class":138},[128,2358,252],{"class":134},[128,2360,2361,2363,2365,2367,2369],{"class":130,"line":317},[128,2362,2149],{"class":207},[128,2364,478],{"class":134},[128,2366,1892],{"class":289},[128,2368,571],{"class":138},[128,2370,252],{"class":134},[128,2372,2373],{"class":130,"line":327},[128,2374,530],{"emptyLinePlaceholder":529},[128,2376,2377,2379,2381,2383,2385,2387,2389,2391,2393],{"class":130,"line":337},[128,2378,2149],{"class":207},[128,2380,478],{"class":134},[128,2382,1912],{"class":207},[128,2384,472],{"class":134},[128,2386,1651],{"class":134},[128,2388,1919],{"class":188},[128,2390,185],{"class":134},[128,2392,1720],{"class":134},[128,2394,1927],{"class":1926},[128,2396,2397,2399,2401,2403,2405],{"class":130,"line":347},[128,2398,2149],{"class":207},[128,2400,478],{"class":134},[128,2402,1937],{"class":289},[128,2404,571],{"class":138},[128,2406,252],{"class":134},[128,2408,2409],{"class":130,"line":357},[128,2410,746],{"class":134},[10,2412,2413],{},"各パラメーターは",[36,2415,2416,2419,2422,2425,2428,2431],{},[39,2417,2418],{},"waveStartPoint：波を書き始めるY軸の開始位置",[39,2420,2421],{},"canvasEndX：canvasの右端のX座標（最大のcanvasX座標）",[39,2423,2424],{},"canvasEndY：canvasの下端のY座標（最大のcanvasXY座標）",[39,2426,2427],{},"deg：角度の初期値",[39,2429,2430],{},"am：振幅（波の最大の高さを変化させる）",[39,2432,2433],{},"tp：周期（１波の幅を変化させる）",[10,2435,2436],{},"最後の３つは高校の三角関数を思い出してください。それほど難しく考えず、amを大きくすれば波が大きくなり、tpの場合は大きいほどなだらかな波になります。",[10,2438,2439],{},"またctxは上部で定義したcanvasインスタンスです。今回はグローバルにしてます。",[1042,2441,2443],{"id":2442},"描画位置を定義し重ね合わせの設定をする","描画位置を定義し、重ね合わせの設定をする",[118,2445,2447],{"className":446,"code":2446,"language":448,"meta":123,"style":123},"var waveStartY = waveStartPoint;\nctx.globalCompositeOperation = \"destination-out\";\nctx.beginPath();\nctx.moveTo(0, waveStartY);\n",[125,2448,2449,2462,2481,2493],{"__ignoreMap":123},[128,2450,2451,2453,2456,2458,2460],{"class":130,"line":131},[128,2452,759],{"class":142},[128,2454,2455],{"class":207}," waveStartY ",[128,2457,182],{"class":134},[128,2459,1634],{"class":207},[128,2461,252],{"class":134},[128,2463,2464,2466,2468,2471,2473,2475,2477,2479],{"class":130,"line":149},[128,2465,1159],{"class":207},[128,2467,478],{"class":134},[128,2469,2470],{"class":207},"globalCompositeOperation ",[128,2472,182],{"class":134},[128,2474,1651],{"class":134},[128,2476,1654],{"class":188},[128,2478,185],{"class":134},[128,2480,252],{"class":134},[128,2482,2483,2485,2487,2489,2491],{"class":130,"line":159},[128,2484,1159],{"class":207},[128,2486,478],{"class":134},[128,2488,1668],{"class":289},[128,2490,571],{"class":207},[128,2492,252],{"class":134},[128,2494,2495,2497,2499,2501,2503,2505,2507,2510],{"class":130,"line":170},[128,2496,1159],{"class":207},[128,2498,478],{"class":134},[128,2500,1682],{"class":289},[128,2502,293],{"class":207},[128,2504,249],{"class":248},[128,2506,299],{"class":134},[128,2508,2509],{"class":207}," waveStartY)",[128,2511,252],{"class":134},[10,2513,2514,2515,2518,2519],{},"画像を波線に透過させる場合にこの設定 ",[125,2516,2517],{},"ctx.globalCompositeOperation = \"destination-out\"; ","が重要です。",[21,2520,2523],{"href":2521,"rel":2522},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FglobalCompositeOperation",[25],"MDNの解説",[10,2525,2526,2527,2529],{},"この",[125,2528,1646],{},"はcanvasにおける図形どうしが重ね合わさった際にどう描画するのかを定義します。冒頭で出したこの図を見てみてください。",[14,2531],{":src":68,":width":17},[10,2533,2534],{},"透明のくりぬきは画像の上に、赤線で範囲を指定してその中を透明色に塗りつぶすということをしています。その時に「すでに描画された画像」と「透明色に塗り潰された図形」が重ね合わさっています。",[10,2536,2537],{},"その時にを設定していると、後で描画した図形と重なり合わない部分だけが残る様に描画されます。つまり上図の５の様に一部分だけ透明になります。",[1042,2539,2540],{"id":2540},"くりぬき範囲を指定する",[118,2542,2544],{"className":446,"code":2543,"language":448,"meta":123,"style":123}," ctx.beginPath();\n ctx.moveTo(0, waveStartY);\n for (var x=0; x \u003C= canvasEndX; x+= 1) {\n     var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));;\n     ctx.lineTo(x, y+waveStartY);\n }\n\n ctx.lineTo(canvasEndX,canvasEndY);\n ctx.lineTo(0,canvasEndY);\n ctx.closePath();\n",[125,2545,2546,2558,2576,2613,2661,2685,2690,2694,2712,2730],{"__ignoreMap":123},[128,2547,2548,2550,2552,2554,2556],{"class":130,"line":131},[128,2549,502],{"class":207},[128,2551,478],{"class":134},[128,2553,1668],{"class":289},[128,2555,571],{"class":207},[128,2557,252],{"class":134},[128,2559,2560,2562,2564,2566,2568,2570,2572,2574],{"class":130,"line":149},[128,2561,502],{"class":207},[128,2563,478],{"class":134},[128,2565,1682],{"class":289},[128,2567,293],{"class":207},[128,2569,249],{"class":248},[128,2571,299],{"class":134},[128,2573,2509],{"class":207},[128,2575,252],{"class":134},[128,2577,2578,2581,2583,2585,2587,2589,2591,2593,2596,2599,2601,2603,2605,2607,2609,2611],{"class":130,"line":159},[128,2579,2580],{"class":1705}," for",[128,2582,542],{"class":207},[128,2584,759],{"class":142},[128,2586,1713],{"class":207},[128,2588,182],{"class":134},[128,2590,249],{"class":248},[128,2592,1720],{"class":134},[128,2594,2595],{"class":207}," x ",[128,2597,2598],{"class":134},"\u003C=",[128,2600,1728],{"class":207},[128,2602,1720],{"class":134},[128,2604,1713],{"class":207},[128,2606,1735],{"class":134},[128,2608,1738],{"class":248},[128,2610,1741],{"class":207},[128,2612,235],{"class":134},[128,2614,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2657,2659],{"class":130,"line":170},[128,2616,1997],{"class":142},[128,2618,1752],{"class":207},[128,2620,472],{"class":134},[128,2622,1757],{"class":134},[128,2624,1614],{"class":207},[128,2626,1762],{"class":134},[128,2628,1765],{"class":207},[128,2630,478],{"class":134},[128,2632,1770],{"class":289},[128,2634,1773],{"class":138},[128,2636,1765],{"class":207},[128,2638,478],{"class":134},[128,2640,1780],{"class":207},[128,2642,646],{"class":134},[128,2644,1619],{"class":207},[128,2646,493],{"class":138},[128,2648,1762],{"class":134},[128,2650,293],{"class":138},[128,2652,1609],{"class":207},[128,2654,1795],{"class":134},[128,2656,1798],{"class":207},[128,2658,1801],{"class":138},[128,2660,2284],{"class":134},[128,2662,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683],{"class":130,"line":196},[128,2664,2030],{"class":207},[128,2666,478],{"class":134},[128,2668,1813],{"class":289},[128,2670,293],{"class":138},[128,2672,1798],{"class":207},[128,2674,299],{"class":134},[128,2676,1752],{"class":207},[128,2678,1795],{"class":134},[128,2680,1826],{"class":207},[128,2682,493],{"class":138},[128,2684,252],{"class":134},[128,2686,2687],{"class":130,"line":218},[128,2688,2689],{"class":134}," }\n",[128,2691,2692],{"class":130,"line":228},[128,2693,530],{"emptyLinePlaceholder":529},[128,2695,2696,2698,2700,2702,2705,2707,2710],{"class":130,"line":238},[128,2697,502],{"class":207},[128,2699,478],{"class":134},[128,2701,1813],{"class":289},[128,2703,2704],{"class":207},"(canvasEndX",[128,2706,299],{"class":134},[128,2708,2709],{"class":207},"canvasEndY)",[128,2711,252],{"class":134},[128,2713,2714,2716,2718,2720,2722,2724,2726,2728],{"class":130,"line":255},[128,2715,502],{"class":207},[128,2717,478],{"class":134},[128,2719,1813],{"class":289},[128,2721,293],{"class":207},[128,2723,249],{"class":248},[128,2725,299],{"class":134},[128,2727,2709],{"class":207},[128,2729,252],{"class":134},[128,2731,2732,2734,2736,2738,2740],{"class":130,"line":267},[128,2733,502],{"class":207},[128,2735,478],{"class":134},[128,2737,1892],{"class":289},[128,2739,571],{"class":207},[128,2741,252],{"class":134},[10,2743,2744],{},"次にくりぬきの範囲を指定します。上図でいうと１〜４を指します。フォトショップやイラストレーターを使っている人なら「パスで選択範囲を指定」という意味がわかると思います。それをここでjsを用いて行っています。",[10,2746,2747],{},"念のために解説すると、パスというのは図形を構成する点（座標）みたいなものです。そして図形はその点を結ぶことで描画できます。四角形であれば点（頂点）は４つあって、それを一筆書きすると四角ができますよね。その一筆書きの順路と位置をこのコードで定義しています。",[1122,2749,2750,2753,2756,2759],{},[39,2751,2752],{},"ctx.beginPath()でパスの指定を開始します。",[39,2754,2755],{},"ctx.moveTo(X,Y)で指定した座標にパスを移動させます。",[39,2757,2758],{},"ctx.lineTo(nextX,nextY)で次の座標を指定しパスを移動させつつ線をひきます。",[39,2760,2761],{},"ctx.closePath()でパスの指定を終了します。",[10,2763,2764],{},"今回はこのパスの指定を",[1122,2766,2767,2770,2773,2776],{},[39,2768,2769],{},"画像の左端（X=０）、指定した波の開始地点（waveStartY）より（0, waveStartY）からパスを開始。",[39,2771,2772],{},"画像の右端（X＝canvasEndX）までfor文を用いて、さらに三角関数の式にx座標を入れて、波線を描く様にパスを指定していく。",[39,2774,2775],{},"画像の右端までついたら、画像の右下端、左下端を通って、開始地点に戻る。",[39,2777,2778],{},"パスを閉じる。",[10,2780,2781],{},"この様にしています。",[1042,2783,2784],{"id":2784},"選択範囲を透明色で塗りつぶす",[10,2786,2787],{},"上記の方法で選択範囲を指定すれば、あとは塗りつぶすだけです。",[118,2789,2791],{"className":446,"code":2790,"language":448,"meta":123,"style":123},"ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\nctx.fill();\n",[125,2792,2793,2814],{"__ignoreMap":123},[128,2794,2795,2797,2799,2802,2804,2806,2808,2810,2812],{"class":130,"line":131},[128,2796,1159],{"class":207},[128,2798,478],{"class":134},[128,2800,2801],{"class":207},"fillStyle ",[128,2803,182],{"class":134},[128,2805,1651],{"class":134},[128,2807,1919],{"class":188},[128,2809,185],{"class":134},[128,2811,1720],{"class":134},[128,2813,1927],{"class":1926},[128,2815,2816,2818,2820,2822,2824],{"class":130,"line":149},[128,2817,1159],{"class":207},[128,2819,478],{"class":134},[128,2821,1937],{"class":289},[128,2823,571],{"class":207},[128,2825,252],{"class":134},[10,2827,2828,2830,2831,2834],{},[125,2829,1912],{},"で塗り潰しの色を設定できます。ここは実際、",[125,2832,2833],{},"globalCompositeOperation = \"destination-out\";","を設定していれば何色でも大丈夫です。ですが念のため透明色を設定。",[10,2836,812,2837,2840,2841,2844],{},[125,2838,2839],{},"fill()","で指定したスタイル、パスの範囲で塗り潰しを行います。g",[125,2842,2843],{},"lobalCompositeOperation = \"destination-out\";","が設定されているので塗り潰された部分と画像の重なり合う部分以外が残り、重なり部分は透明になります。",[10,2846,2847],{},"ここまで来れば以下の様に波線にくり抜かれた画像が得られます。",[14,2849],{":src":16,":width":17},[29,2851,2852],{"id":2852},"ループでアニメーションを実装",[10,2854,2855,2856,2859,2860,2862],{},"定義した",[125,2857,2858],{},"imageSet()","と",[125,2861,2093],{},"を用いて以下のループを設定します。",[118,2864,2866],{"className":446,"code":2865,"language":448,"meta":123,"style":123},"function loop(){\n      setInterval(function(){\n      imageSet(image,canvasEndX,canvasEndY);\n      waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n      degree += 12; \u002F\u002F12はなんとなく\n    },30)\n}\n",[125,2867,2868,2877,2888,2909,2942,2958,2969],{"__ignoreMap":123},[128,2869,2870,2872,2875],{"class":130,"line":131},[128,2871,455],{"class":142},[128,2873,2874],{"class":289}," loop",[128,2876,461],{"class":134},[128,2878,2879,2882,2884,2886],{"class":130,"line":149},[128,2880,2881],{"class":289},"      setInterval",[128,2883,293],{"class":138},[128,2885,455],{"class":142},[128,2887,461],{"class":134},[128,2889,2890,2893,2895,2897,2899,2901,2903,2905,2907],{"class":130,"line":159},[128,2891,2892],{"class":289},"      imageSet",[128,2894,293],{"class":138},[128,2896,684],{"class":207},[128,2898,299],{"class":134},[128,2900,1411],{"class":207},[128,2902,299],{"class":134},[128,2904,1416],{"class":207},[128,2906,493],{"class":138},[128,2908,252],{"class":134},[128,2910,2911,2914,2916,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940],{"class":130,"line":170},[128,2912,2913],{"class":289},"      waveDrawing",[128,2915,293],{"class":138},[128,2917,1430],{"class":207},[128,2919,299],{"class":134},[128,2921,1411],{"class":207},[128,2923,299],{"class":134},[128,2925,1416],{"class":207},[128,2927,299],{"class":134},[128,2929,1443],{"class":207},[128,2931,299],{"class":134},[128,2933,1448],{"class":207},[128,2935,299],{"class":134},[128,2937,1453],{"class":207},[128,2939,493],{"class":138},[128,2941,252],{"class":134},[128,2943,2944,2947,2950,2953,2955],{"class":130,"line":196},[128,2945,2946],{"class":207},"      degree",[128,2948,2949],{"class":134}," +=",[128,2951,2952],{"class":248}," 12",[128,2954,1720],{"class":134},[128,2956,2957],{"class":1926}," \u002F\u002F12はなんとなく\n",[128,2959,2960,2963,2966],{"class":130,"line":218},[128,2961,2962],{"class":134},"    },",[128,2964,2965],{"class":248},"30",[128,2967,2968],{"class":138},")\n",[128,2970,2971],{"class":130,"line":228},[128,2972,746],{"class":134},[10,2974,2975,2976,2979,2980,2982],{},"ここで一番大切なのは",[125,2977,2978],{},"deggre +=4","の様に",[125,2981,2093],{},"で用いる初期角度を足していくことです。こうすることで波がウネウネします。degreeの加算が多いほど波が早くなります。50以上にすると荒波になります笑",[10,2984,2985,2986,2989,2990,2992],{},"そしてこの",[125,2987,2988],{},"loop()","の関数を",[125,2991,1024],{},"で呼び出して発火させます。",[118,2994,2996],{"className":446,"code":2995,"language":448,"meta":123,"style":123},"image.onload = function(){\n    initDraw();\n    loop();\n}\n",[125,2997,2998,3012,3020,3029],{"__ignoreMap":123},[128,2999,3000,3002,3004,3006,3008,3010],{"class":130,"line":131},[128,3001,684],{"class":207},[128,3003,478],{"class":134},[128,3005,662],{"class":289},[128,3007,472],{"class":134},[128,3009,667],{"class":142},[128,3011,461],{"class":134},[128,3013,3014,3016,3018],{"class":130,"line":149},[128,3015,1271],{"class":289},[128,3017,571],{"class":138},[128,3019,252],{"class":134},[128,3021,3022,3025,3027],{"class":130,"line":159},[128,3023,3024],{"class":289},"    loop",[128,3026,571],{"class":138},[128,3028,252],{"class":134},[128,3030,3031],{"class":130,"line":170},[128,3032,746],{"class":134},[29,3034,3035],{"id":3035},"コード全体",[10,3037,3038],{},"上記をまとめたコードがこちらです。",[118,3040,3042],{"className":446,"code":3041,"language":448,"meta":123,"style":123},"window.onload = init();\nfunction init(){\n    initAnimation();\n\n    function initAnimation(){\n        var canvas = document.getElementById('canvas');\n        var ctx = canvas.getContext('2d');\n\n        var imagePath = ('.\u002Fsample.jpg');\n        var image = new Image();\n        image.src = imagePath;\n\n        \u002F\u002Fset canvas width and height\n        canvas.width = Number(window.innerWidth);\n        canvas.height = Number(canvas.width\u002F2);\n        image.onload = function(){\n                initDraw();\n                loop();\n            }\n            \n        var canvasEndX = canvas.width;\n        var canvasEndY = canvas.height;\n        var waveStartPoint = canvasEndY-150;\n\n        var amplitude = 30;\n        var period = 600;\n        var degree = 0;\n\n        function initDraw(){\n            imageSet(image,canvasEndX,canvasEndY);\n            waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n        }\n\n        function loop(){\n            setInterval(function(){\n                imageSet(image,canvasEndX,canvasEndY);\n                waveDrawing(waveStartPoint,canvasEndX,canvasEndY,degree,amplitude,period);\n                degree += 12;\n            },30)\n        }\n\n        function imageSet(imageObj,canvasEndX,canvasEndY){\n            var imgWidth = imageObj.width;\n            var imgHeight = imageObj.height;\n\n            ctx.globalCompositeOperation = \"destination-over\";\n            ctx.drawImage(image,0,0,imgWidth,imgHeight,0,0,canvasEndX,canvasEndY);\n        }\n\n        function waveDrawing(waveStartPoint,canvasEndX,canvasEndY,deg,am,tp){\n            var waveStartY = waveStartPoint;\n            ctx.globalCompositeOperation = \"destination-out\";\n            ctx.beginPath();\n            ctx.moveTo(0, waveStartY);\n\n            for (var x=0; x \u003C= canvasEndX; x+= 1) {\n                var y = -am*Math.sin((Math.PI\u002Ftp)*(deg+x));\n                ctx.lineTo(x, y+waveStartY);\n            }\n\n            ctx.lineTo(canvasEndX,canvasEndY);\n            ctx.lineTo(0,canvasEndY);\n            ctx.closePath();\n\n            ctx.fillStyle = \"rgba(255,255,255,1)\"; \u002F\u002Fopacity 1\n            ctx.fill();\n        }\n\n    }\n}\n",[125,3043,3044,3062,3070,3079,3083,3092,3118,3144,3148,3168,3184,3199,3203,3208,3233,3261,3275,3284,3293,3297,3302,3318,3334,3350,3354,3367,3381,3394,3398,3407,3428,3461,3466,3470,3478,3489,3510,3543,3554,3563,3567,3571,3592,3610,3627,3632,3653,3702,3707,3712,3745,3758,3777,3790,3811,3816,3852,3902,3928,3933,3938,3959,3980,3993,3998,4019,4032,4037,4042,4047],{"__ignoreMap":123},[128,3045,3046,3048,3050,3053,3055,3058,3060],{"class":130,"line":131},[128,3047,613],{"class":207},[128,3049,478],{"class":134},[128,3051,3052],{"class":207},"onload ",[128,3054,182],{"class":134},[128,3056,3057],{"class":289}," init",[128,3059,571],{"class":207},[128,3061,252],{"class":134},[128,3063,3064,3066,3068],{"class":130,"line":149},[128,3065,455],{"class":142},[128,3067,3057],{"class":289},[128,3069,461],{"class":134},[128,3071,3072,3075,3077],{"class":130,"line":159},[128,3073,3074],{"class":289},"    initAnimation",[128,3076,571],{"class":138},[128,3078,252],{"class":134},[128,3080,3081],{"class":130,"line":170},[128,3082,530],{"emptyLinePlaceholder":529},[128,3084,3085,3088,3090],{"class":130,"line":196},[128,3086,3087],{"class":142},"    function",[128,3089,458],{"class":289},[128,3091,461],{"class":134},[128,3093,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112,3114,3116],{"class":130,"line":218},[128,3095,1749],{"class":142},[128,3097,469],{"class":207},[128,3099,472],{"class":134},[128,3101,475],{"class":207},[128,3103,478],{"class":134},[128,3105,481],{"class":289},[128,3107,293],{"class":138},[128,3109,486],{"class":134},[128,3111,363],{"class":188},[128,3113,486],{"class":134},[128,3115,493],{"class":138},[128,3117,252],{"class":134},[128,3119,3120,3122,3124,3126,3128,3130,3132,3134,3136,3138,3140,3142],{"class":130,"line":228},[128,3121,1749],{"class":142},[128,3123,502],{"class":207},[128,3125,472],{"class":134},[128,3127,469],{"class":207},[128,3129,478],{"class":134},[128,3131,511],{"class":289},[128,3133,293],{"class":138},[128,3135,486],{"class":134},[128,3137,518],{"class":188},[128,3139,486],{"class":134},[128,3141,493],{"class":138},[128,3143,252],{"class":134},[128,3145,3146],{"class":130,"line":238},[128,3147,530],{"emptyLinePlaceholder":529},[128,3149,3150,3152,3154,3156,3158,3160,3162,3164,3166],{"class":130,"line":255},[128,3151,1749],{"class":142},[128,3153,537],{"class":207},[128,3155,472],{"class":134},[128,3157,542],{"class":138},[128,3159,486],{"class":134},[128,3161,547],{"class":188},[128,3163,486],{"class":134},[128,3165,493],{"class":138},[128,3167,252],{"class":134},[128,3169,3170,3172,3174,3176,3178,3180,3182],{"class":130,"line":267},[128,3171,1749],{"class":142},[128,3173,560],{"class":207},[128,3175,472],{"class":134},[128,3177,565],{"class":134},[128,3179,568],{"class":289},[128,3181,571],{"class":138},[128,3183,252],{"class":134},[128,3185,3186,3189,3191,3193,3195,3197],{"class":130,"line":273},[128,3187,3188],{"class":207},"        image",[128,3190,478],{"class":134},[128,3192,583],{"class":207},[128,3194,472],{"class":134},[128,3196,537],{"class":207},[128,3198,252],{"class":134},[128,3200,3201],{"class":130,"line":281},[128,3202,530],{"emptyLinePlaceholder":529},[128,3204,3205],{"class":130,"line":312},[128,3206,3207],{"class":1926},"        \u002F\u002Fset canvas width and height\n",[128,3209,3210,3213,3215,3217,3219,3221,3223,3225,3227,3229,3231],{"class":130,"line":317},[128,3211,3212],{"class":207},"        canvas",[128,3214,478],{"class":134},[128,3216,603],{"class":207},[128,3218,472],{"class":134},[128,3220,608],{"class":289},[128,3222,293],{"class":138},[128,3224,613],{"class":207},[128,3226,478],{"class":134},[128,3228,618],{"class":207},[128,3230,493],{"class":138},[128,3232,252],{"class":134},[128,3234,3235,3237,3239,3241,3243,3245,3247,3249,3251,3253,3255,3257,3259],{"class":130,"line":327},[128,3236,3212],{"class":207},[128,3238,478],{"class":134},[128,3240,631],{"class":207},[128,3242,472],{"class":134},[128,3244,608],{"class":289},[128,3246,293],{"class":138},[128,3248,363],{"class":207},[128,3250,478],{"class":134},[128,3252,603],{"class":207},[128,3254,646],{"class":134},[128,3256,649],{"class":248},[128,3258,493],{"class":138},[128,3260,252],{"class":134},[128,3262,3263,3265,3267,3269,3271,3273],{"class":130,"line":337},[128,3264,3188],{"class":207},[128,3266,478],{"class":134},[128,3268,662],{"class":289},[128,3270,472],{"class":134},[128,3272,667],{"class":142},[128,3274,461],{"class":134},[128,3276,3277,3280,3282],{"class":130,"line":347},[128,3278,3279],{"class":289},"                initDraw",[128,3281,571],{"class":138},[128,3283,252],{"class":134},[128,3285,3286,3289,3291],{"class":130,"line":357},[128,3287,3288],{"class":289},"                loop",[128,3290,571],{"class":138},[128,3292,252],{"class":134},[128,3294,3295],{"class":130,"line":384},[128,3296,270],{"class":134},[128,3298,3299],{"class":130,"line":393},[128,3300,3301],{"class":138},"            \n",[128,3303,3304,3306,3308,3310,3312,3314,3316],{"class":130,"line":419},[128,3305,1749],{"class":142},[128,3307,1728],{"class":207},[128,3309,472],{"class":134},[128,3311,469],{"class":207},[128,3313,478],{"class":134},[128,3315,603],{"class":207},[128,3317,252],{"class":134},[128,3319,3320,3322,3324,3326,3328,3330,3332],{"class":130,"line":428},[128,3321,1749],{"class":142},[128,3323,1330],{"class":207},[128,3325,472],{"class":134},[128,3327,469],{"class":207},[128,3329,478],{"class":134},[128,3331,631],{"class":207},[128,3333,252],{"class":134},[128,3335,3336,3338,3340,3342,3344,3346,3348],{"class":130,"line":1582},[128,3337,1749],{"class":142},[128,3339,1634],{"class":207},[128,3341,472],{"class":134},[128,3343,1330],{"class":207},[128,3345,1333],{"class":134},[128,3347,1336],{"class":248},[128,3349,252],{"class":134},[128,3351,3352],{"class":130,"line":1587},[128,3353,530],{"emptyLinePlaceholder":529},[128,3355,3356,3358,3361,3363,3365],{"class":130,"line":1624},[128,3357,1749],{"class":142},[128,3359,3360],{"class":207}," amplitude",[128,3362,472],{"class":134},[128,3364,1354],{"class":248},[128,3366,252],{"class":134},[128,3368,3369,3371,3374,3376,3379],{"class":130,"line":1639},[128,3370,1749],{"class":142},[128,3372,3373],{"class":207}," period",[128,3375,472],{"class":134},[128,3377,3378],{"class":248}," 600",[128,3380,252],{"class":134},[128,3382,3383,3385,3388,3390,3392],{"class":130,"line":1661},[128,3384,1749],{"class":142},[128,3386,3387],{"class":207}," degree",[128,3389,472],{"class":134},[128,3391,1382],{"class":248},[128,3393,252],{"class":134},[128,3395,3396],{"class":130,"line":1675},[128,3397,530],{"emptyLinePlaceholder":529},[128,3399,3400,3403,3405],{"class":130,"line":1697},[128,3401,3402],{"class":142},"        function",[128,3404,1395],{"class":289},[128,3406,461],{"class":134},[128,3408,3409,3412,3414,3416,3418,3420,3422,3424,3426],{"class":130,"line":1702},[128,3410,3411],{"class":289},"            imageSet",[128,3413,293],{"class":138},[128,3415,684],{"class":207},[128,3417,299],{"class":134},[128,3419,1411],{"class":207},[128,3421,299],{"class":134},[128,3423,1416],{"class":207},[128,3425,493],{"class":138},[128,3427,252],{"class":134},[128,3429,3430,3433,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459],{"class":130,"line":1746},[128,3431,3432],{"class":289},"            waveDrawing",[128,3434,293],{"class":138},[128,3436,1430],{"class":207},[128,3438,299],{"class":134},[128,3440,1411],{"class":207},[128,3442,299],{"class":134},[128,3444,1416],{"class":207},[128,3446,299],{"class":134},[128,3448,1443],{"class":207},[128,3450,299],{"class":134},[128,3452,1448],{"class":207},[128,3454,299],{"class":134},[128,3456,1453],{"class":207},[128,3458,493],{"class":138},[128,3460,252],{"class":134},[128,3462,3463],{"class":130,"line":1806},[128,3464,3465],{"class":134},"        }\n",[128,3467,3468],{"class":130,"line":1833},[128,3469,530],{"emptyLinePlaceholder":529},[128,3471,3472,3474,3476],{"class":130,"line":1838},[128,3473,3402],{"class":142},[128,3475,2874],{"class":289},[128,3477,461],{"class":134},[128,3479,3480,3483,3485,3487],{"class":130,"line":1843},[128,3481,3482],{"class":289},"            setInterval",[128,3484,293],{"class":138},[128,3486,455],{"class":142},[128,3488,461],{"class":134},[128,3490,3491,3494,3496,3498,3500,3502,3504,3506,3508],{"class":130,"line":1864},[128,3492,3493],{"class":289},"                imageSet",[128,3495,293],{"class":138},[128,3497,684],{"class":207},[128,3499,299],{"class":134},[128,3501,1411],{"class":207},[128,3503,299],{"class":134},[128,3505,1416],{"class":207},[128,3507,493],{"class":138},[128,3509,252],{"class":134},[128,3511,3512,3515,3517,3519,3521,3523,3525,3527,3529,3531,3533,3535,3537,3539,3541],{"class":130,"line":1885},[128,3513,3514],{"class":289},"                waveDrawing",[128,3516,293],{"class":138},[128,3518,1430],{"class":207},[128,3520,299],{"class":134},[128,3522,1411],{"class":207},[128,3524,299],{"class":134},[128,3526,1416],{"class":207},[128,3528,299],{"class":134},[128,3530,1443],{"class":207},[128,3532,299],{"class":134},[128,3534,1448],{"class":207},[128,3536,299],{"class":134},[128,3538,1453],{"class":207},[128,3540,493],{"class":138},[128,3542,252],{"class":134},[128,3544,3545,3548,3550,3552],{"class":130,"line":1899},[128,3546,3547],{"class":207},"                degree",[128,3549,2949],{"class":134},[128,3551,2952],{"class":248},[128,3553,252],{"class":134},[128,3555,3556,3559,3561],{"class":130,"line":1904},[128,3557,3558],{"class":134},"            },",[128,3560,2965],{"class":248},[128,3562,2968],{"class":138},[128,3564,3565],{"class":130,"line":1930},[128,3566,3465],{"class":134},[128,3568,3569],{"class":130,"line":1944},[128,3570,530],{"emptyLinePlaceholder":529},[128,3572,3574,3576,3578,3580,3582,3584,3586,3588,3590],{"class":130,"line":3573},42,[128,3575,3402],{"class":142},[128,3577,1472],{"class":289},[128,3579,293],{"class":134},[128,3581,1478],{"class":1477},[128,3583,299],{"class":134},[128,3585,1411],{"class":1477},[128,3587,299],{"class":134},[128,3589,1416],{"class":1477},[128,3591,1489],{"class":134},[128,3593,3595,3598,3600,3602,3604,3606,3608],{"class":130,"line":3594},43,[128,3596,3597],{"class":142},"            var",[128,3599,1496],{"class":207},[128,3601,472],{"class":134},[128,3603,1501],{"class":207},[128,3605,478],{"class":134},[128,3607,603],{"class":207},[128,3609,252],{"class":134},[128,3611,3613,3615,3617,3619,3621,3623,3625],{"class":130,"line":3612},44,[128,3614,3597],{"class":142},[128,3616,1514],{"class":207},[128,3618,472],{"class":134},[128,3620,1501],{"class":207},[128,3622,478],{"class":134},[128,3624,631],{"class":207},[128,3626,252],{"class":134},[128,3628,3630],{"class":130,"line":3629},45,[128,3631,530],{"emptyLinePlaceholder":529},[128,3633,3635,3638,3640,3642,3644,3646,3649,3651],{"class":130,"line":3634},46,[128,3636,3637],{"class":207},"            ctx",[128,3639,478],{"class":134},[128,3641,1646],{"class":207},[128,3643,472],{"class":134},[128,3645,1651],{"class":134},[128,3647,3648],{"class":188},"destination-over",[128,3650,185],{"class":134},[128,3652,252],{"class":134},[128,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680,3682,3684,3686,3688,3690,3692,3694,3696,3698,3700],{"class":130,"line":3655},47,[128,3657,3637],{"class":207},[128,3659,478],{"class":134},[128,3661,679],{"class":289},[128,3663,293],{"class":138},[128,3665,684],{"class":207},[128,3667,299],{"class":134},[128,3669,249],{"class":248},[128,3671,299],{"class":134},[128,3673,249],{"class":248},[128,3675,299],{"class":134},[128,3677,1550],{"class":207},[128,3679,299],{"class":134},[128,3681,1555],{"class":207},[128,3683,299],{"class":134},[128,3685,249],{"class":248},[128,3687,299],{"class":134},[128,3689,249],{"class":248},[128,3691,299],{"class":134},[128,3693,1411],{"class":207},[128,3695,299],{"class":134},[128,3697,1416],{"class":207},[128,3699,493],{"class":138},[128,3701,252],{"class":134},[128,3703,3705],{"class":130,"line":3704},48,[128,3706,3465],{"class":134},[128,3708,3710],{"class":130,"line":3709},49,[128,3711,530],{"emptyLinePlaceholder":529},[128,3713,3715,3717,3719,3721,3723,3725,3727,3729,3731,3733,3735,3737,3739,3741,3743],{"class":130,"line":3714},50,[128,3716,3402],{"class":142},[128,3718,1592],{"class":289},[128,3720,293],{"class":134},[128,3722,1430],{"class":1477},[128,3724,299],{"class":134},[128,3726,1411],{"class":1477},[128,3728,299],{"class":134},[128,3730,1416],{"class":1477},[128,3732,299],{"class":134},[128,3734,1609],{"class":1477},[128,3736,299],{"class":134},[128,3738,1614],{"class":1477},[128,3740,299],{"class":134},[128,3742,1619],{"class":1477},[128,3744,1489],{"class":134},[128,3746,3748,3750,3752,3754,3756],{"class":130,"line":3747},51,[128,3749,3597],{"class":142},[128,3751,1629],{"class":207},[128,3753,472],{"class":134},[128,3755,1634],{"class":207},[128,3757,252],{"class":134},[128,3759,3761,3763,3765,3767,3769,3771,3773,3775],{"class":130,"line":3760},52,[128,3762,3637],{"class":207},[128,3764,478],{"class":134},[128,3766,1646],{"class":207},[128,3768,472],{"class":134},[128,3770,1651],{"class":134},[128,3772,1654],{"class":188},[128,3774,185],{"class":134},[128,3776,252],{"class":134},[128,3778,3780,3782,3784,3786,3788],{"class":130,"line":3779},53,[128,3781,3637],{"class":207},[128,3783,478],{"class":134},[128,3785,1668],{"class":289},[128,3787,571],{"class":138},[128,3789,252],{"class":134},[128,3791,3793,3795,3797,3799,3801,3803,3805,3807,3809],{"class":130,"line":3792},54,[128,3794,3637],{"class":207},[128,3796,478],{"class":134},[128,3798,1682],{"class":289},[128,3800,293],{"class":138},[128,3802,249],{"class":248},[128,3804,299],{"class":134},[128,3806,1629],{"class":207},[128,3808,493],{"class":138},[128,3810,252],{"class":134},[128,3812,3814],{"class":130,"line":3813},55,[128,3815,530],{"emptyLinePlaceholder":529},[128,3817,3819,3822,3824,3826,3828,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848,3850],{"class":130,"line":3818},56,[128,3820,3821],{"class":1705},"            for",[128,3823,542],{"class":138},[128,3825,759],{"class":142},[128,3827,1713],{"class":207},[128,3829,182],{"class":134},[128,3831,249],{"class":248},[128,3833,1720],{"class":134},[128,3835,1713],{"class":207},[128,3837,1725],{"class":134},[128,3839,1728],{"class":207},[128,3841,1720],{"class":134},[128,3843,1713],{"class":207},[128,3845,1735],{"class":134},[128,3847,1738],{"class":248},[128,3849,1741],{"class":138},[128,3851,235],{"class":134},[128,3853,3855,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878,3880,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900],{"class":130,"line":3854},57,[128,3856,3857],{"class":142},"                var",[128,3859,1752],{"class":207},[128,3861,472],{"class":134},[128,3863,1757],{"class":134},[128,3865,1614],{"class":207},[128,3867,1762],{"class":134},[128,3869,1765],{"class":207},[128,3871,478],{"class":134},[128,3873,1770],{"class":289},[128,3875,1773],{"class":138},[128,3877,1765],{"class":207},[128,3879,478],{"class":134},[128,3881,1780],{"class":207},[128,3883,646],{"class":134},[128,3885,1619],{"class":207},[128,3887,493],{"class":138},[128,3889,1762],{"class":134},[128,3891,293],{"class":138},[128,3893,1609],{"class":207},[128,3895,1795],{"class":134},[128,3897,1798],{"class":207},[128,3899,1801],{"class":138},[128,3901,252],{"class":134},[128,3903,3905,3908,3910,3912,3914,3916,3918,3920,3922,3924,3926],{"class":130,"line":3904},58,[128,3906,3907],{"class":207},"                ctx",[128,3909,478],{"class":134},[128,3911,1813],{"class":289},[128,3913,293],{"class":138},[128,3915,1798],{"class":207},[128,3917,299],{"class":134},[128,3919,1752],{"class":207},[128,3921,1795],{"class":134},[128,3923,1826],{"class":207},[128,3925,493],{"class":138},[128,3927,252],{"class":134},[128,3929,3931],{"class":130,"line":3930},59,[128,3932,270],{"class":134},[128,3934,3936],{"class":130,"line":3935},60,[128,3937,530],{"emptyLinePlaceholder":529},[128,3939,3941,3943,3945,3947,3949,3951,3953,3955,3957],{"class":130,"line":3940},61,[128,3942,3637],{"class":207},[128,3944,478],{"class":134},[128,3946,1813],{"class":289},[128,3948,293],{"class":138},[128,3950,1411],{"class":207},[128,3952,299],{"class":134},[128,3954,1416],{"class":207},[128,3956,493],{"class":138},[128,3958,252],{"class":134},[128,3960,3962,3964,3966,3968,3970,3972,3974,3976,3978],{"class":130,"line":3961},62,[128,3963,3637],{"class":207},[128,3965,478],{"class":134},[128,3967,1813],{"class":289},[128,3969,293],{"class":138},[128,3971,249],{"class":248},[128,3973,299],{"class":134},[128,3975,1416],{"class":207},[128,3977,493],{"class":138},[128,3979,252],{"class":134},[128,3981,3983,3985,3987,3989,3991],{"class":130,"line":3982},63,[128,3984,3637],{"class":207},[128,3986,478],{"class":134},[128,3988,1892],{"class":289},[128,3990,571],{"class":138},[128,3992,252],{"class":134},[128,3994,3996],{"class":130,"line":3995},64,[128,3997,530],{"emptyLinePlaceholder":529},[128,3999,4001,4003,4005,4007,4009,4011,4013,4015,4017],{"class":130,"line":4000},65,[128,4002,3637],{"class":207},[128,4004,478],{"class":134},[128,4006,1912],{"class":207},[128,4008,472],{"class":134},[128,4010,1651],{"class":134},[128,4012,1919],{"class":188},[128,4014,185],{"class":134},[128,4016,1720],{"class":134},[128,4018,1927],{"class":1926},[128,4020,4022,4024,4026,4028,4030],{"class":130,"line":4021},66,[128,4023,3637],{"class":207},[128,4025,478],{"class":134},[128,4027,1937],{"class":289},[128,4029,571],{"class":138},[128,4031,252],{"class":134},[128,4033,4035],{"class":130,"line":4034},67,[128,4036,3465],{"class":134},[128,4038,4040],{"class":130,"line":4039},68,[128,4041,530],{"emptyLinePlaceholder":529},[128,4043,4045],{"class":130,"line":4044},69,[128,4046,741],{"class":134},[128,4048,4050],{"class":130,"line":4049},70,[128,4051,746],{"class":134},[29,4053,4054],{"id":4054},"波の様子を変えたい場合",[10,4056,4057],{},"このコードの場合は",[118,4059,4061],{"className":446,"code":4060,"language":448,"meta":123,"style":123},"var amplitude = 30;\nvar period = 600;\n\nfunction loop(){\n      ...\n      degree += 12;\n      },30)\n}\n",[125,4062,4063,4075,4087,4091,4099,4104,4114,4123],{"__ignoreMap":123},[128,4064,4065,4067,4069,4071,4073],{"class":130,"line":131},[128,4066,759],{"class":142},[128,4068,1349],{"class":207},[128,4070,182],{"class":134},[128,4072,1354],{"class":248},[128,4074,252],{"class":134},[128,4076,4077,4079,4081,4083,4085],{"class":130,"line":149},[128,4078,759],{"class":142},[128,4080,1363],{"class":207},[128,4082,182],{"class":134},[128,4084,3378],{"class":248},[128,4086,252],{"class":134},[128,4088,4089],{"class":130,"line":159},[128,4090,530],{"emptyLinePlaceholder":529},[128,4092,4093,4095,4097],{"class":130,"line":170},[128,4094,455],{"class":142},[128,4096,2874],{"class":289},[128,4098,461],{"class":134},[128,4100,4101],{"class":130,"line":196},[128,4102,4103],{"class":134},"      ...\n",[128,4105,4106,4108,4110,4112],{"class":130,"line":218},[128,4107,2946],{"class":207},[128,4109,2949],{"class":134},[128,4111,2952],{"class":248},[128,4113,252],{"class":134},[128,4115,4116,4119,4121],{"class":130,"line":228},[128,4117,4118],{"class":134},"      },",[128,4120,2965],{"class":248},[128,4122,2968],{"class":207},[128,4124,4125],{"class":130,"line":238},[128,4126,746],{"class":207},[10,4128,4129,4132,4133,4136,4137,4140,4141,4143],{},[125,4130,4131],{},"amplitude（振幅）","で波の最大の高さ、",[125,4134,4135],{},"period（周期）","で１波の周期、",[125,4138,4139],{},"degree +=","で波の速さを変化させることができます。他にも",[125,4142,2093],{},"で定義した三角関数の式を変えることで単純なサイン波でなく、複雑な波を描画できます。",[29,4145,4146],{"id":4146},"最後に",[10,4148,4149],{},"以上がcanvasを用いて画像をウネウネさせる方法です。canvasではこの様に複雑なアニメーションを用いた描画が可能です。jsで記述するのでFlashのActionScriptとかやっていた人は馴染みがあるかもしれません。",[223,4151,4152],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":123,"searchDepth":159,"depth":159,"links":4154},[4155,4156,4159,4164,4172,4173,4174,4175],{"id":31,"depth":149,"text":31},{"id":53,"depth":149,"text":53,"children":4157},[4158],{"id":92,"depth":159,"text":93},{"id":99,"depth":149,"text":99,"children":4160},[4161],{"id":440,"depth":159,"text":440,"children":4162},[4163],{"id":1044,"depth":170,"text":1045},{"id":1241,"depth":149,"text":1241,"children":4165},[4166,4167],{"id":1966,"depth":159,"text":1967},{"id":2087,"depth":159,"text":2088,"children":4168},[4169,4170,4171],{"id":2442,"depth":170,"text":2443},{"id":2540,"depth":170,"text":2540},{"id":2784,"depth":170,"text":2784},{"id":2852,"depth":149,"text":2852},{"id":3035,"depth":149,"text":3035},{"id":4054,"depth":149,"text":4054},{"id":4146,"depth":149,"text":4146},[4177],"devstack","2026-03-04","md",null,{},"\u002Farticles\u002Fjs-canvas-wave",{"title":5,"description":5},"articles\u002Fjs-canvas-wave",[4186],"js","_mix\u002Fex01-768x299.png","M7BMAJ4ad0W1ocZaATiSTEMNK1g6YP1t_HrYUpkyahQ",1780987139615]