当前位置:   article > 正文

【Canvas】画布,画圆、背景以及生成图片_用canvas画圆并且添加不同的颜色

用canvas画圆并且添加不同的颜色

1、插入文字

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

2、插入图片

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

3、插入圆形的图片

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

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

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

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

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

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

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

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



声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/254388
推荐阅读
  

闽ICP备14008679号