Anwendungsbeispiele der Methode drawImage() in HTML5 Canvas API_html5 Tutorial-Fähigkeiten

<script> <li class="alt"> <span> </span> </li> window.onload = <li><span>function</span></li>(){ <li class="alt"> <span> </span> </li> <li><span>var</span></li> canvas = document.getElementById(<li class="alt"> <span>"canvas"</span><span class="keyword">); </span> <span> </span> </li>canvas.width = 800; <li> <span> </span><span class="keyword">canvas.height = 600; </span> <span> </span><span class="string"> </span><span>var</span> </li> context = canvas.getContext(<li class="alt"><span>"2d"</span></li> <li> <span> </span> </li> context.fillStyle = <li class="alt"> <span>"#FFF"</span><span class="keyword"> </span> <span> </span><span class="string"> context.fillRect(0,0,800,600); </span><span> </span> </li> <li> <span> </span><span class="string">var</span><span> img = </span> </li>new<li class="alt"> <span> Image(); </span> </li> <li><span> img.src = </span></li>"./images/20-1.jpg"<li class="alt"> <span>; </span><span class="keyword"> img.onload = </span><span>Funktion</span><span class="keyword">(){ </span> <span> </span> </li> context.drawImage(img,200,50); <li> <span> </span><span class="string">                                                              </span><span> }; </span> </li> <li class="alt"> <span></script>

Laufergebnis:

Erstellen Sie einen Fotorahmen:
Hier kombinieren wir clip(), drawImage() und die kubische Bezier-Kurve bezierCurveTo(), um im obigen Fall einen herzförmigen Fotorahmen hinzuzufügen~

JavaScript-CodeInhalt in die Zwischenablage kopieren

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7. 
   
     
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<script>   </span> </li> <li class="alt"> <span>    window.onload = </span><span class="keyword">Funktion</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"> <span>        canvas.width = 800;   </span> </li> <li> <span>        canvas.height = 600;   </span> </li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillRect(0,0,800,600);   </span> </li> <li> <span>  </span> </li> <li class="alt"> <span>        context.beginPath();   </span> </li> <li> <span>        context.moveTo(400,260);   </span> </li> <li class="alt"> <span>        context.bezierCurveTo(450,220,450,300,400,315);   </span> </li> <li> <span>        context.bezierCurveTo(350,300,350,220,400,260);   </span> </li> <li class="alt"> <span>        context.clip();   </span> </li> <li> <span>        context.closePath();   </span> </li> <li class="alt"> <span>  </span> </li> <li> <span>        </span><span class="keyword">var</span><span> img = </span><span class="keyword">new</span><span> Image();   </span> </li> <li class="alt"> <span>        img.src = </span><span class="string">"./images/20-1.jpg"</span><span>;   </span> </li> <li> <span>        img.onload = </span><span class="keyword">Funktion</span><span>(){   </span> </li> <li class="alt"> <span>            context.drawImage(img,348,240,100,100);   </span> </li> <li> <span>        }   </span> </li> <li class="alt"> <span>    };   </span> </li> <li> <span></script>