溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html5中Canvas API中drawImage怎么用

發(fā)布時間：2021-03-12 10:20:23 來源：億速云 閱讀：176 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)html5中Canvas API中drawImage怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

drawImage()是一個很關(guān)鍵的方法，它可以引入圖像、畫布、視頻，并對其進行縮放或裁剪。

一共有三種表現(xiàn)形式：

語法 1

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.drawImage(img,dx,dy);

語法 2

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.drawImage(img,dx,dy,dw,dw);

語法 3

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

來看一下坐標草圖：
html5中Canvas API中drawImage怎么用

PS: 不要在樣式中定義<canvas> 的寬和高，否則，里面所畫的圖片會自動放大或者縮小。
三參數(shù)的是標準形式，可用于加載圖像、畫布或視頻；五參數(shù)的除了可以加載圖像還可以對圖像進行指定寬高的縮放；九參數(shù)的除了縮放，還可以裁剪。各參數(shù)意義見下表。

參數(shù)
描述
img
sx可選。開始剪切的 x 坐標位置。
sy可選。開始剪切的 y 坐標位置。
swidth可選。被剪切圖像的寬度。
sheight可選。被剪切圖像的高度。
x在畫布上放置圖像的 x 坐標位置。
y在畫布上放置圖像的 y 坐標位置。
width可選。要使用的圖像的寬度。（伸展或縮小圖像）
height要使用的圖像的高度。（伸展或縮小圖像）

下面，我們加載一個圖片試試。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>drawImage()</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的瀏覽器居然不支持Canvas？！趕快換一個吧?。?nbsp;  
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,200,50);   
        }   
    };   
</script>   
</body>   
</html>

運行結(jié)果：
html5中Canvas API中drawImage怎么用

創(chuàng)建相框：
這里，我們結(jié)合clip()和drawImage()以及三次貝塞爾曲線bezierCurveTo()，來為上面一個案例，加上一個心形的相框~

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>繪制心形相框</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = 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();   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,348,240,100,100);   
        }   
    };   
</script>   
</body>   
</html>

運行結(jié)果：
html5中Canvas API中drawImage怎么用

是不是美美的？好啦，至此最關(guān)鍵的遮罩和圖像裁剪以及說完了，其實在java.awt中，drawImage()也是一個至關(guān)重要的方法。有人說制作Java游戲界面，只要會用drawImage()就可以一招打遍天下~在Canvas里也是一樣的。美工提供的素材基本都是圖片，這個時候drawImage()對圖片的處理就很重要了。即使基本功，也是對圖片最重要的處理方法。

關(guān)于“html5中Canvas API中drawImage怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手