html5学习笔记(6)使用canvas绘图2

一、对树干使用背景图片

注意:当图片加载完成时才能在树干上使用

       //加载用作树干的图片
        var bark = new Image();
        bark.src = "bark.jpg";
        //当图片加载完成,开始在canvas上绘图
        bark.onload = function () {
            drawTrails(context);
        }

           //在画布上画树
            function drawTrails(context) {
                context.save();
                context.translate(100, 250);			
				
                //1、路径
                //创建表现树冠的路径
                createCanopyPath(context);
                //2、描边样式
                //加宽线条
                context.lineWidth = 4;
                //平滑路径的接合点
                context.linejoin = 'round';
                //将颜色修改为棕色
                context.strokeStyle = '#663300';
	       context.stroke();

                //3、填充样式	
                //将填充色设置为绿色并填充树冠
                context.fillStyle = '#339900';
                context.fill();				
		//4、使用加载的图片填充树干区域
	    context.drawImage(bark, -5, -50, 10, 50);
              context.restore();				
            }

二、使用渐变

            //对树干使用渐变
            function trunkGradient(context) {				
              
		//创建用作水平树干纹理的三阶水平渐变
                var turnGradient = context.createLinearGradient(-5, -50, 5, -50);
                //树干的左侧边缘部分是一般程度的棕色
                turnGradient.addColorStop(0, "#663300");
                //树干中间偏左的位置颜色要淡一些
                turnGradient.addColorStop(0.4, "#996600");
                //树干右侧边缘的颜色要深一些
                turnGradient.addColorStop(1, "#552200");
                //使用渐变色填充树干
                context.fillStyle = turnGradient;
                context.fillRect(-5, -50, 10, 50);
				
                //接下来创建垂直渐变,以用作树冠在树干上投影
                var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

                //投影渐变的起点是透明度设为50%的黑色
                canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');

                //方向垂直向下,渐变色在很短的距离内迅速渐变至完全透明,这段长度之外的树干上没有投影
                canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

                //在树干上填充投影渐变
                context.fillStyle = canopyShadow;
                context.fillRect(-5, -50, 10, 50);		
		
            }        

三、绘制一条小路曲线

 function drawCurve(context) {
                //保存canvas的状态并绘制路径
                context.save();
                context.translate(-10, 350);
                context.beginPath();
                //第一条曲线向右上方弯曲
                context.moveTo(0, 0);
                context.quadraticCurveTo(170, -50, 260, -190);
                //第二条曲线向右下方弯曲
                context.quadraticCurveTo(300, -250, 410, -250);
                //使用棕色的粗线条来绘制路径
                context.strokeStyle = '#663300';
                context.lineWidth = 20;
                context.stroke();
                //恢复之前的canvas状态
                context.restore();
            }

效果如下: