html5字体em,html5字体设置图片生成QQ签名字体样式
特效描述:html5字体设置 图片生成 QQ签名字体。html5 canvas字体设置生成图片字体样式,QQ签名字体样式,进击のXX生成器支持字数无限。
代码结构
1. HTML代码
内容:
文字背景图:
bg4.png
bg5.png
下载图片
var mycanvas=document.getElementById("mycanvas");
var mytxt1=document.getElementById("mytxt1");
var dbg=document.getElementById("dbg");
var imgdownload=document.getElementById("imgdownload");
var ctx=mycanvas.getContext("2d");
var bg=new Image();
var bg2=new Image();
bg.src='imgs/bg3.png';
bg2.src='imgs/bg4.png';
bg2.οnlοad=ShowImg;
function ShowImg(){
bg2.src='imgs/'+dbg.value;
ctx.drawImage(bg,0,0,mycanvas.width,mycanvas.height);
ctx.save();
var fpadd=200;//规定内间距
var fsz=Math.ceil((mycanvas.width-fpadd*2)/mytxt1.value.length);//根据字数计算字体大小
ctx.font=fsz+"px hychf";
var tw=ctx.measureText(mytxt1.value).width;//文字真实宽度
var ftop=(mycanvas.height-fsz)/2-30;//根据字体大小计算文字top
var fleft=(mycanvas.width-tw)/2+16;//根据字体大小计算文字left
ctx.textBaseline="top";//设置绘制文本时的文本基线。
var woodfill = ctx.createPattern(bg2,"repeat");//设置图片为笔刷
ctx.fillStyle=woodfill;
ctx.shadowBlur=10;//阴影程度
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=20;
ctx.shadowColor="rgba(0,0,0,1)";
ctx.fillText(mytxt1.value,fleft,ftop);
ctx.lineWidth = 1;
ctx.strokeStyle ="rgba(255,255,255,0.4)";
ctx.strokeText(mytxt1.value, fleft, ftop);
ctx.restore();
}
document.getElementById("send").οnclick=ShowImg;
imgdownload.οnclick=function(){
if(!mytxt1.value){alert('请输入内容');return false;}
this.href = mycanvas.toDataURL();
this.target = "_blank";
this.download =mytxt1.value + ".png";
}
html5字体em,html5字体设置图片生成QQ签名字体样式相关推荐
- PNG图片生成CSS图标字体
第一步:使用转换器将PNG 转SVG. Choose a file -> Generate -> Download SVG. 第二步:使用IconMoon,将SVG生成css图标字体. ① ...
- css设置图片、边框、背景样式
设置图片边框样式 border-style none无边框,默认值 dotted点线 dashed虚线 solid实线 double双线 groove凹型线 ridge凸型线 inset嵌入式 out ...
- 用freetype开源字体库,实现在图片上字体大小
掌握truetype字体原理,利用freetype开源字体库,实现在图片上书写一行字体大小变化的诗句(比如首字体增大). 首先,在树莓派上安装freetype: 下载好: 传输文件,并且安装好: 解压 ...
- VBA Excel实践如何系列(三)vba如何设置单元格边框、字体
vba设置单元格字体,以下是设置给定单元格内字体的加粗,单元格填充灰色等,参数是Range对象 Sub font_sty(Rng As Range)Rng.SelectSelection.Font.B ...
- Eclipse详细设置护眼背景色和字体颜色并导出(转自百度)
Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,将给大家详细介绍如何设置成护眼主题的方法,也做个抛砖引玉,希望能有更多的主题出现在Eclips ...
- html设置图片的宽高
一.HTML标签内控制宽度高度 img标签自带的属性:width和height: 例如: <img src='图片地址' width:150; heght:150; /> 注意:通过 ...
- vue动态设置文字布局方式_VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
- Python批量导入图片生成能治疗颈椎病的HTML5版课件
本文要点:Python文件操作,HTML5的figure元素和CSS3属性的用法. 说明:1):本文图片来自于相关阅读中Python批量导出多个PPT/PPTX文件中每个幻灯片为独立JPG图片或Pyt ...
- html5 字体位置,html5字体样式 移动 html5 中文什么字体
网页字体样式华文黑体:STHeiti 网页字体样式华文楷体:STKaiti 网页字体样式华文宋体:STSong 网页字体样式华文仿宋:STFangsong 网页字体样式黑体:SimHei 网页字体样式 ...
最新文章
- python3 urllib
- 编译libmysqlclient.a静态库
- android view 镜像,Android 实现镜像效果
- 美团王兴评价马云:“我仍然认为他有诚信问题”,大家怎么看?
- 前端学习(650):标识符 关键字 保留字
- python代码进去docker容器内_python脚本监控docker容器
- C++两种单例(饿汉式,懒汉式)
- [USB-Blaster] Error (209040): Can't access JTAG chain
- 提交IOS开发效率的几个插件(Xcode神器推荐贴)
- html倒计时样式,简单实现JS倒计时效果
- 自制计算机考试系统,用WPS表格制作考试系统 -电脑资料
- SQL替换字段中一部分字符串
- kt条件例题运筹学_运筹学讲解习题
- Win11预览版怎么更新正式版?
- suse linux安装rpm包,suse linux rpm 安装
- 第五模块 常用邮件沟通场景(1):求职信
- 【TVM 巡礼】How to optimize cpu(x86) gemm串讲
- flex布局HTML实例,Flex常见布局实例
- 哪些平台可以查看医学类文献?
- 【Resnet】Resnet代码详解(图+代码)