我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

css3实现把图片画到画布上的方法-创新互联

css3实现把图片画到画布上的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

专业成都网站建设公司,做排名好的好网站,排在同行前面,为您带来客户和效益!成都创新互联公司为您提供成都网站建设,五站合一网站设计制作,服务好的网站设计公司,网站设计、成都网站建设负责任的成都网站制作公司!
您的浏览器不支持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实现把图片画到画布上的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:css3实现把图片画到画布上的方法-创新互联
链接URL:http://shouzuofang.com/article/djcdps.html

其他资讯