css3實現(xiàn)把圖片畫到畫布上的方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)新干免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
重慶分公司
重慶分公司
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）里面的參數(shù)分別為，圖片，x坐標(biāo)，y坐標(biāo)，圖片寬度，圖片高度
效果圖：
現(xiàn)在呢，我要讓畫布畫的圖片能在pc和移動端都能適應(yīng)，那么，我就要對這些代碼進行再加工，我現(xiàn)在只要改 把圖片畫到畫布上的代碼
//把圖片畫到畫布上
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 () {//頁面大小發(fā)生改變的時候自動刷新頁面
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（）方法是一定要用的，我也是經(jīng)過摸索之后才發(fā)現(xiàn)的，如果不用的話，你每次切換PC端和移動端的時候都要手動刷新頁面，雖然說功能還是可以實現(xiàn)，但是用戶體驗不是很好。
一定要注意，頁面大小改變的時候先要清除畫布，否則會有不同頁面大小的畫布疊加
我這里只是簡單的區(qū)分了一下移動端和PC端，如果要是在移動端不同屏幕大小的設(shè)備上自適應(yīng)的話，還需要更多的if(){}else{}的判斷。
感謝各位的閱讀！看完上述內(nèi)容，你們對css3實現(xiàn)把圖片畫到畫布上的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
