关于Canvas画图

首先明白使用canvas绘制图像文件需要用到CanvasRenderingContext2D对象的主要属性和方法：

drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)

将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中

也就是说我们可以使用一个名为drawImage()的方法。
素材如下：

1111.png

2222.png

3333.png

代码如下：

    
    
    


    
    
    

    


    
        您的浏览器不支持canvas标签
    

画完效果如下（原谅我审美不咋地，凑合看）:

注意啊，第一张可以是jpg其余的素材最好是透明的png。否则你的图只是一层一层被画完覆盖了。是不是类似一个模拟的合成图片。哟吼吼~然后，这样子你会想。我要把我最后生成的图片导出来送我女朋友咋办呢？

canvas是很善解人意的：画布(canvas)对象有一个非常有用的方法:toDataURL()
。这个方法能把画布里的图案转变成base64编码格式的png，然后返回[ Data URL]数据。
这样子我们再来一遍代码：

    
    
    


    
    
    

    


    
    
        您的浏览器不支持canvas标签
    

要注意的问题是必须必须在wap环境里跑_{否则无效哦}
另保存图片目前采取的是同后台相配合~这里就不贴了。