移动端前端项目--9_商品图片canvas加载制作

http://www.w3school.com.cn/tags/html_ref_canvas.asp

http://www.w3school.com.cn/tags/canvas_drawimage.asp

一、canvas demo
1、canvas01.html

  
    Your browser does not support the HTML5 canvas tag.
  

  

canvas01.gif

2、canvas02-createLinearGradient.html

canvas02.gif

  
    Your browser does not support the HTML5 canvas tag.
   
  

3、canvas03-strokeText.html

  
    Your browser does not support the HTML5 canvas tag.
   
  

canvas03-strokeText.gif

4、HTML5 canvas drawImage() 方法

要使用的图像：
![The Tulip](/i/eg_tulip.jpg)

画布：

  Your browser does not support the HTML5 canvas tag.

drawImage.gif

小技巧：HTML5 cavas画布加载图片

  
  
  
  
  
  
Your browser does not support the canvas element.  
  
  
  
  
  
  

二、案例wxshop:用canvas加载图片
1、修改index.html和pproductlist.html商品列表中的标签

2、修改样式（sass/module/content.scss）

canvas{
  width: 100px;
  min-height:100px;
  background: #fff url(../images/loading.gif) center center no-repeat;
  background-size: 15px auto; //不写也没关系???
}

3、添加mainconfig.js
1)常用函数放于js>commonobj.js中 ???

`