canvas繪制圖片

本文轉載自查看原文 2019-05-30 01:13 1473 JavaScript

通過canvas的drawImage(image, dx, dy)方法來繪制圖片，drawImage寫法有三種可以參考MDN， MDN地址 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

繪制圖片時要繪制的圖片要先加載到HTML中，繪制時要在 window.onload函數中調用或者寫個按鈕點擊按鈕式調用不然會顯示不出來因為圖片是異步加載直接繪制時圖片還沒加載出來就繪制那一定是空白的繪制不出來

全部代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            canvas{
                border: 1px solid red;
            }
            img{
                display: none;
            }
        </style>
    </head>
    <body>
        <img src="img/mimi.jpg" />
        <img src="img/mm.jpg"/>
        <canvas id="canvas"></canvas>
        <script>
            var canvas=document.querySelector("#canvas");
            var bg=document.querySelector("img");
            var bg1=document.querySelectorAll("img")[1];
            canvas.width=800;
            canvas.height=800;
            var content=canvas.getContext("2d");

     /*繪制多張圖片時第一張會被當成背景，下一張圖片會折疊在第一張上*/           
     window.onload=function(){
          content.drawImage(bg, 10, 10); //以Canvas畫布上的坐標(10,10)為起始點，繪制圖像
          content.drawImage(bg1, 20, 20);//以Canvas畫布上的坐標(20,20)為起始點，繪制圖像
     }
        </script>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 canvas繪制圖片 canvas(八)繪制圖片和幀動畫 HTML5 Canvas 繪制圖片不顯示的問題 Canvas中 drawImage繪制圖片不顯示微信小程序-canvas繪制圖片 canvas - drawImage()方法繪制圖片不顯示的問題問題1：canvas繪制圖片加載不出來【bug解決】使用canvas繪制圖片時無效使用html5 canvas繪制圖片關於使用html2canvas 繪制圖片的坑