HTML canvas 输入文字,关于Canvas写字

首先明确canvas是有一个font属性的。利用这个属性我们可以将输入的文字画到画布或者说是已有图片上。先进行最基本的：画布上写字。

canvas写字测试

您的浏览器不支持canvas标签

var canvas = document.getElementById("mycv");

var text = document.getElementById("text");

var btn = document.getElementById("btn");

btn.onclick = function() {

//clear

canvas.height = canvas.height;

var value = text.value;

if(canvas.getContext) {

var ctx = canvas.getContext("2d");

//创建渐变

var grad=ctx.createLinearGradient(0,0,canvas.width,0);

grad.addColorStop("0","magenta");

grad.addColorStop("0.5","yellow");

grad.addColorStop("1.0","red");

ctx.font = "bold 30px arial";

ctx.fillStyle = "blue";

//竖排文字保持X轴不变Y轴递增

for(var i = 0; i < value.length; i ++) {

//绘制有填充的文本

ctx.fillText(value[i], 10, 35*(i+1));

//绘制无填充的文本

ctx.strokeText(value[i], 60, 35*(i+1));

}

//横排文字

ctx.strokeStyle = grad;

ctx.fillText(value,150,50);

ctx.strokeText(value, 150, 150);

}

图片如下：

HTML canvas 输入文字,关于Canvas写字相关推荐

微信小程序输入文字用canvas生成公章并转为图片
<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany&quo ...
canvas读取图片，输入文字，调整文字属性，拖拽文字位置，并保存图片
不是专门做前端的,代码写的不太好,权当抛砖引玉. 整体思路: 共有5层,除了背景颜色的div没什么用之外,canvas1用来读取图片作为背景,canvas2把文字展示出来,并记录拖拽文字的位置,can ...
vue动态设置文字布局方式_VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
android canvas添加文字居中,android Canvas drawText 文字居中
1首先利用canvas获取画布的宽高, //获取屏幕的宽和高 int width = canvas.getWidth(); int height = canvas.getHeight(); 2获取文字 ...
canvas中文显示乱码 html5_如何使用HTML5 canvas绘制文字
如果要使用HTML5 Canvas绘制文字,那么需要使用到画布上下文的fillText()方法.下面我们来看具体的内容. 我们先来看具体的示例 function draw() { var canvas ...
html5 canvas 显示文字,如何使用HTML5canvas绘制文字
如果要使用HTML5 Canvas绘制文字,那么需要使用到画布上下文的fillText()方法.下面我们来看具体的内容. 我们先来看具体的示例 function draw() { var canvas ...

HTML canvas 输入文字,关于Canvas写字

HTML canvas 输入文字,关于Canvas写字相关推荐

最新文章

热门文章