核心知识点：drawImage

作用：将图片加载在canvas

html:

Your browser does not support the canvas element.

js:

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="flower.png" cxt.drawImage(img,0,0); </script>

移动端图片loading实例

需求：需要给一个列表中的图片添加加载效果

html

专属标题简介这里简介这里简介这里简介这里简介这里简介这里简介这里简介介这里简介价格：￥5000

重点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 = $(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 = imgSrc; } }) } }