首页 > 代码库 > canvas移动端常用技巧图片loading
canvas移动端常用技巧图片loading
核心知识点:drawImage
作用:将图片加载在canvas
html:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
js:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://www.mamicode.com/flower.png"
cxt.drawImage(img,0,0);
</script>
移动端图片loading实例
需求:需要给一个列表中的图片添加加载效果
html
<section class="productul" id="productul">
<ul>
<li>
<a href="#">
<div class="triangle-topleft"></div>
<span class="shuxing" data_url="productinfo.html">专属</span>
<div class="leftimages fl"><canvas data-src="images/product/product1.png" ></canvas></div>
<div class="productcontent fr">
<p class="ptitle pl10">标题</p>
<p class="pdes pl10">简介这里简介这里简介这里简介这里简介这里简介这里简介这里简介介这里简介</p>
<p class="pprice pl10">价格:<span class="green">¥5000</span></p>
</div>
</a>
</li>
</ul>
</section>
重点css
img{width:100px;birder:0;}
canvas{width:100px;min-height:100px;background:#fff url("../images/loading.gif") center center no-repeat; background-size:15px auto; }
js
var imglength = $("#productul").find("canvas").length;
if (imglength > 0) {
$("#productul").find("canvas").each(function () {
var imgSrc = http://www.mamicode.com/$(this).data("src");
var imageObj = new Image();
imageObj.canvs = $(this)[0];
var cvs = imageObj.canvs.getContext(‘2d‘);
if (cvs) {
imageObj.onload = function () {
imageObj.canvs.width = this.width;
imageObj.canvs.height = this.height;
cvs.drawImage(this, 0, 0);
$(imageObj.canvs).css("background-image", "none");
}
imageObj.src =http://www.mamicode.com/ imgSrc;
}
})
}
}
原文链接:http://www.cnblogs.com/leejersey/p/4714613.html
canvas移动端常用技巧图片loading
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。