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);