赞
踩
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
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。