window.onload = function(){
        var drawing = document.getElementById('drawing');
        if(drawing.getContext) {
            //阴影
            var context = drawing.getContext('2d');
            context.shadowColor = 'rgba(0, 0, 0, 0.5)';//阴影颜色，默认黑色
            context.shadowOffsetX = 5;//x轴方向的阴影偏移量，默认0
            context.shadowOffsetY = 5;//y轴方向的阴影偏移量，默认0
            context.shadowBlur = 4;//模糊的像素数，默认0

            context.fillStyle = 'rgba(0, 0, 255, 0.5)';
            context.fillRect(10, 10, 50, 50);
            context.fillStyle = 'pink';
            context.fillRect(30, 30, 50, 50);

            //渐变
            var gradient = context.createLinearGradient(100, 10, 130, 130);//创建线性渐变，返回CanvasGradient对象的实例。参数：起点x坐标、y坐标、终点x坐标、y坐标
            gradient.addColorStop(0, 'white');//指定色标，参数：色标位置（0到1之间的数字，0表示开始的颜色，1为结束的颜色）、css颜色值
            gradient.addColorStop(1, 'black');

            context.fillStyle = gradient;
            context.fillRect(100, 10, 50, 50);

            var createLinearGradient = function(context, x, y, width, height) {
                return context.createLinearGradient(x, y, x+width, y+height);
            };

            var gradientNew = createLinearGradient(context, 180, 10, 50, 50);
            gradientNew.addColorStop(0, 'red');
            gradientNew.addColorStop(1, 'green');
            context.fillStyle = gradientNew;
            context.fillRect(180, 10, 50, 50);

            var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);//径向渐变,参数：起点圆的圆心、半径，终点圆的圆心、半径
            gradientRound.addColorStop(0, 'pink');
            gradientRound.addColorStop(1, 'blue');
            context.fillStyle = gradientRound;
            context.fillRect(250, 10, 50, 50);

            //模式，即重复的图像，可以用来填充或描边图形
            var image = document.images[0],
                pattern = context.createPattern(image, 'repeat-x');//创建新模式，参数：图像元素、是否重复（repeat、repeat-x、repeat-y、no-repeat）
            context.fillStyle = pattern;
            context.fillRect(350, 10, 350, 350);
        }
}