canvas基础4 -- 图像

drawImage

context.drawImage(image, dx, dy)

dx, dy：图片左上角起始值

图片大小默认为图片原有的尺寸

图片超出canvas的部分会自动裁剪掉

    
    



    
        您的浏览器尚不支持canvas
    

    

图示：

context.drawImage(image, dx, dy, dw, dh)

dw,dh： 设置绘制图片的宽和高

    
    



    
        您的浏览器尚不支持canvas
    

    

图示：

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

sx, sy, sw, sh：设置渲染原图像的 起始点和宽高

示例：

    
    



    
        您的浏览器尚不支持canvas
    

    

图示：

缩放图像

示例：

    
    



    
        您的浏览器尚不支持canvas
    
    

    

图示：

添加水印

制作第二个canvas用于做水印，并加载到第一个canvas上

    
    



    
        您的浏览器尚不支持canvas
    
    

    
        您的浏览器尚不支持canvas
    

    

图示：

放大镜

示例：

    
    



    
        您的浏览器尚不支持canvas
    

    

    

图示：

1