css3實現把圖片畫到畫布上的方法

css3實現把圖片畫到畫布上的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

專注于為中小企業提供成都網站設計、網站建設、外貿網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業新干免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了1000多家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

<canvas id="myCanvas" width="1000px" height="200px" >您的瀏覽器不支持canvas標簽。</canvas>

var canvas = document.getElementById("myCanvas");
//獲取畫筆
var ctx=canvas.getContext('2d');
//聲明Image對象
var img=new Image();
//獲取img路徑
img.src="img/num.png";
//把圖片畫到畫布上
img.onload=function(){
	ctx.drawImage(img,57,0,57,64);
}

如果要把幾張不同的圖片放畫到畫布上，有幾張圖片就需要聲明幾次對象，獲取幾次路徑，在畫布上畫幾次。

下面是我在畫布上畫來 6張圖片，

var canvas = document.getElementById("myCanvas");
//獲取畫筆
			var ctx=canvas.getContext('2d');
			//聲明Image對象
			var img=new Image();
			var img1=new Image();
			var img2=new Image();
			var img3=new Image();
			var img4=new Image();
			var img5=new Image();
			//獲取img路徑
			img.src="img/num.png";
			img1.src="img/num/1.png"
			img2.src="img/num/4.png"
			img3.src="img/num/2.png"
			img4.src="img/num/5.png"
			img5.src="img/num/7.png"
			//把圖片畫到畫布上
			img.onload=function(){
				ctx.drawImage(img,57,0,57,64);
			}
			img1.onload=function(){
				ctx.drawImage(img1,114,0,57,64);
			}
			img2.onload=function(){
				ctx.drawImage(img2,171,0,57,64);
			}
			img3.onload=function(){
				ctx.drawImage(img3,228,0,57,64);
			}
			img4.onload=function(){
				ctx.drawImage(img4,285,0,57,64);
			}
			img5.onload=function(){
				ctx.drawImage(img5,342,0,57,64);
			}

ctx.drawImage（img5,342,0,57,64）里面的參數分別為，圖片，x坐標，y坐標，圖片寬度，圖片高度

效果圖：

css3實現把圖片畫到畫布上的方法

現在呢，我要讓畫布畫的圖片能在pc和移動端都能適應，那么，我就要對這些代碼進行再加工，我現在只要改把圖片畫到畫布上的代碼

 //把圖片畫到畫布上
        function getCurrentImg() {
            var docW = $(document.body).width(); //獲取頁面寬度
              if (docW == 640) {//640是PC端的寬度
                 img.onload = function () {
                    ctx.drawImage(img, 22, 58, 55, 66);
                }
                img1.onload = function () {
                    ctx.drawImage(img1, 77, 58, 55, 66);
                }
                img2.onload = function () {
                    ctx.drawImage(img2, 132, 58, 55, 66);
                }
                img3.onload = function () {
                    ctx.drawImage(img3, 187, 58, 55, 66);
                }
                img4.onload = function () {
                    ctx.drawImage(img4, 242, 58, 55, 66);
                }
                img5.onload = function () {
                    ctx.drawImage(img5, 297, 58, 55, 66);
                }
              } else if (docW < 640) {//移動端的時候
                     img.onload = function () {
                        ctx.drawImage(img, 19, 51, 40, 45);
                    }
                    img1.onload = function () {
                        ctx.drawImage(img1, 59, 51, 40, 45);
                    }
                    img2.onload = function () {
                        ctx.drawImage(img2, 99, 51, 40, 45);
                    }
                    img3.onload = function () {
                        ctx.drawImage(img3, 139, 51, 40, 45);
                    }
                    img4.onload = function () {
                        ctx.drawImage(img4, 179, 51, 40, 45);
                    }
                    img5.onload = function () {
                        ctx.drawImage(img5, 219, 51, 40, 45);
                    }
              }
        }
        getCurrentImg();
        $(window).resize(function () {//頁面大小發生改變的時候自動刷新頁面
            var docW = $(document.body).width();
            var canvas = document.getElementById("myCanvas");
             //var ctx = canvas.getContext('2d');
             if (docW == 640) {
                canvas.height=canvas.height;//頁面改變時清除畫布
                 ctx.drawImage(img, 22, 58, 55, 66);
                    ctx.drawImage(img1, 77, 58, 55, 66);
                    ctx.drawImage(img2, 132, 58, 55, 66);
                    ctx.drawImage(img3, 187, 58, 55, 66);
                    ctx.drawImage(img4, 242, 58, 55, 66);
                    ctx.drawImage(img5, 297, 58, 55, 66);
                      
             } else if (docW < 640) {
                 canvas.height=canvas.height;//頁面改變時清除畫布
                    ctx.drawImage(img, 19, 51, 40, 45);
                   ctx.drawImage(img1, 59, 51, 40, 45);
                    ctx.drawImage(img2, 99, 51, 40, 45);
                    ctx.drawImage(img3, 139, 51, 40, 45);
                    ctx.drawImage(img4, 179, 51, 40, 45);
                    ctx.drawImage(img5, 219, 51, 40, 45);
                      
            }
        })

resize（）方法是一定要用的，我也是經過摸索之后才發現的，如果不用的話，你每次切換PC端和移動端的時候都要手動刷新頁面，雖然說功能還是可以實現，但是用戶體驗不是很好。

一定要注意，頁面大小改變的時候先要清除畫布，否則會有不同頁面大小的畫布疊加

我這里只是簡單的區分了一下移動端和PC端，如果要是在移動端不同屏幕大小的設備上自適應的話，還需要更多的if(){}else{}的判斷。

感謝各位的閱讀！看完上述內容，你們對css3實現把圖片畫到畫布上的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創新互聯行業資訊頻道。

網站題目：css3實現把圖片畫到畫布上的方法
本文URL：http://m.kartarina.com/article20/ppppjo.html

成都網站建設公司_創新互聯，為您提供微信小程序、、全網營銷推廣、網站設計公司、網站內鏈、Google

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容