当前位置:Gxlcms > css > css3实现把图片画到画布上(代码实例)

css3实现把图片画到画布上(代码实例)

时间:2021-07-01 10:21:17 帮助过:37人阅读

本文给大家介绍把图片画到画布上的方法,适应PC和移动端 使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

画一张图片到画布上

<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坐标,图片宽度,图片高度

效果图:

现在呢,我要让画布画的图片能在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视频教程,Html5视频教程!

相关推荐:

php公益培训视频教程

CSS3在线手册

div/css图文教程

HTML5图文教程

HTML5在线手册

html5特效代码大全

以上就是css3实现把图片画到画布上(代码实例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行