Canvas笔触调整-8

 

js部分

        // 得到绘制源
        var c = document.getElementById('canvas');
        // 创建画布，建立二维视角
        var ctx = c.getContext('2d');
        // 填充绘制色
        ctx.strokeStyle = '#ff0000';
        // 描绘运行轨迹
        ctx.strokeRect(0,0,200,100);

        // 声明渐变方式
        var gra = ctx.createLinearGradient(0,0,200,0);
        gra.addColorStop("0","magenta");
        gra.addColorStop("0.5","blue");
        gra.addColorStop("1","red");
        // 赋值渐变色
        ctx.strokeStyle = gra;

        // 设置绘制线的粗细
        // ctx.lineWidth = 5;
        ctx.strokeRect(30,10,150,60);
        ctx.font="20px Axure Handwriting, 'Courier New', monospace,华文新魏";
        ctx.strokeText("BaBy 想你!!",45,50);