canvas绘制分享商品海报——已完成

 记一次canvas经验，本次绘制生成分享海报，用到了绘制多张图片、绘制文字（颜色、换行显示）、绘制线条（颜色、粗细）、绘制圆形图片等。

以下的代码是需要写在draw函数里的

//html
 <canvas id="myCanvas" width="1000" height="1200">该浏览器不支持生成分享图片</canvas> 


//js
function draw(fn){
    var canvas=document.getElementById('myCanvas'),
    ctx=canvas.getContext('2d');
    len=dataIMG.length;
    canvas.width=400;
    canvas.height=800;
    ctx.fillStyle="#fff";
    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fill();

    function drawing(n){

      //以下的代码写在这里



    }
    drawing(0);
}       

 一、绘制多张图片

这个我之前有写过，所以，此处放链接多张图文利用canvas生成图片模糊（已解决）

二、绘制文字（颜色、换行）

ctx.fillStyle = '#aaa';   //设置文字颜色
ctx.font = '23px Adobe Ming Std';  //设置字号和字体
ctx.fillText("我的名字",100,50);  //文字内容和位置


//换行
ctx.fillStyle = '#333';
ctx.font = '23px Adobe Ming Std';
//textBaseline 属性设置或返回在绘制文本时的当前文本基线。  middle文本基线是文本的正中（横向）。
ctx.textBaseline = "middle"; 
var shareTitleText = "我是换行的文字我是换行文字换行文字";
var chr = shareTitleText.split("");  //分割成字符串数组，并定义为chr，便于下面计算长度
var temp = "";
var row = [];
//循环文本的长度，并measureText---检查temp文本的宽度，判断文本宽度是否大于200，如果不大于，则加入到在定义好的空的row数组中，每加入一次，就清空temp一次，循环添加文本
for (var a = 0; a < chr.length; a++) {
    if (ctx.measureText(temp).width < 200) {;
    } else {
        row.push(temp);
        temp = "";
    }
    temp += chr[a];
}

//循环完成后，row数组就有了完整的文本信息--数组字符串的形式
row.push(temp);

//再次循环，循环row数组的长度，如果长度大于100，数组的文本信息要加“……”，在画布中的位置是X=20；Y=650 + (b + 1) * 30；其中30表示行高，可以修改。
for (var b = 0; b < row.length; b++) {
  if(row.length>100){
    ctx.fillText(row[b] + "……", 20, 650 + (b + 1) * 30);  
  }else{
    ctx.fillText(row[b], 20, 650 + (b + 1) * 30);
  }
}

 三、绘制线条

//画线条
ctx.beginPath();  //开始一条路径的绘制
ctx.moveTo(18,644)  
ctx.lineTo(80,652)  // moveTo和lineTo中，其中的数值相当于（X,Y），第一个数值表示X轴即横向长度；第二个数值表示Y轴即纵向高度
ctx.strokeStyle  = '#bbb';  //设置线条的颜色
ctx.lineWidth  = 3;  //设置线条的粗细
ctx.stroke();   //必备，需要这个实际地完成绘制，通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色线条的绘制。

四、绘制圆形图片

//绘制圆形图片--头像
var avatarurl_width = 80;    //绘制的头像宽度
var avatarurl_heigth = 80;   //绘制的头像高度
var avatarurl_x = 10;   //绘制的头像在画布上的位置
var avatarurl_y = 10;   //绘制的头像在画布上的位置
ctx.save();   //画布将当前的状态保存
ctx.beginPath(); //开始绘制
//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是要保存save()的原因
ctx.drawImage(img, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 绘制图片