css3實作把圖片畫到畫布上（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

css3實作把圖片畫到畫布上（程式碼實例）

青灯夜游

Oct 10, 2018 pm 04:30 PM

canvas css3 html5 畫布

本文要跟大家介紹把圖片畫到畫布上的方法，適應PC和行動裝置使用。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

畫一張圖片到畫布上

<canvas id="myCanvas" width="1000px" height="200px" >您的浏览器不支持canvas标签。</canvas>

登入後複製

var canvas = document.getElementById("myCanvas");
//获取画笔
var ctx=canvas.getContext(&#39;2d&#39;);
//声明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(&#39;2d&#39;);
			//声明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坐标，图片宽度，图片高度

登入後複製

效果圖：

現在呢，我要讓畫布畫的圖片能在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(&#39;2d&#39;);
             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影片教學，Html5影片教學！