HTML5 Canvas API中drawImage()方法的使用實例

2020-03-24 18:41:10

字體：大中小

來源：轉載

供稿：網友

drawImage()是一個很關鍵的方法，它可以引入圖像、畫布、視頻，并對其進行縮放或裁剪。一共有三種表現形式：語法 1
JavaScript Code復制內容到剪貼板
來看一下坐標草圖：
PS: 不要在樣式中定義 canvas 的寬和高，否則，里面所畫的圖片會自動放大或者縮小。
三參數的是標準形式，可用于加載圖像、畫布或視頻；五參數的除了可以加載圖像還可以對圖像進行指定寬高的縮放；九參數的除了縮放，還可以裁剪。各參數意義見下表。

style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧??！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); varimg=newImage(); img.src= ./images/20-1.jpg ; img.onload=function(){ context.drawImage(img,200,50); } }; /script /body /html
運行結果：
創建相框：
這里，我們結合clip()和drawImage()以及三次貝塞爾曲線bezierCurveTo()，來為上面一個案例，加上一個心形的相框~JavaScript Code復制內容到剪貼板
style body{background:url( ./images/bg3.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); context.beginPath(); context.moveTo(400,260); context.bezierCurveTo(450,220,450,300,400,315); context.bezierCurveTo(350,300,350,220,400,260); context.clip(); context.closePath(); varimg=newImage(); img.src= ./images/20-1.jpg ; img.onload=function(){ context.drawImage(img,348,240,100,100); } }; /script /body /html
運行結果：
是不是美美的？好啦，至此最關鍵的遮罩和圖像裁剪以及說完了，其實在java.awt中，drawImage()也是一個至關重要的方法。有人說制作Java游戲界面，只要會用drawImage()就可以一招打遍天下~在Canvas里也是一樣的。美工提供的素材基本都是圖片，這個時候drawImage()對圖片的處理就很重要了。即使基本功，也是對圖片最重要的處理方法。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：簡單介紹HTML5中的文件導入_0

下一篇：html豎直分割線如何設置？html豎直分割線的代碼講