【Canvas】画布，画圆、背景以及生成图片

1、插入文字

//设置用户文本填充颜色
context.fillStyle = '#999';
//设置用户文本的大小字体等属性
context.font = "small-caps bold 25px Arial";
//绘制文字
context.fillText("时间飞逝",230,250,200);

2、插入图片

context.drawImage('imgurl',10,300,530,500);

3、插入圆形的图片

context.beginPath();
//画裁剪区域，此处以圆为例
context.translate(5,50);
context.arc(50,50,50,0,2*Math.PI);
context.clip();//次方法下面的部分为待剪切区域，上面的部分为剪切区域
context.drawImage('imgurl',0,0,100,100);

4、插入有背景颜色的文字

先插入背景颜色，然后再插入文字

context.fillStyle = '#f5850d';//设置用户文本的大小字体等属性
context.font = "small-caps bold 35px Arial";//设置用户文本填充颜色
context.fillText("时间飞逝",140,1030,200);

context.fillStyle = '#fff';//设置用户文本的大小字体等属性
context.font = "small-caps bold 33px Arial";//设置用户文本填充颜色
context.fillText("时间飞逝",120,1090,200);

5、canvas转换成base64格式的数据

canvas.toDataURL('image/jpeg',0.8); //转换图片为dataURL

6、base64格式转换成图片显示

'data:image/jpg;base64,'+imgurl