通过Javascript、Html5通过键盘在用户的杯子上编写自定义文本_Javascript_Css_Html

通过Javascript、Html5通过键盘在用户的杯子上编写自定义文本

javascript css html

通过Javascript、Html5通过键盘在用户的杯子上编写自定义文本,javascript,css,html,Javascript,Css,Html,我想在马克杯上写文本，并通过Javascript、Html5更改字体样式、颜色、大小等属性。现在我正在使用Javascript，Html5。我想在这个杯子图像上写文字，还想更改字体颜色、字体大小、字体样式和旋转文字我看到了这个链接，但我并不满意。我不能给你原始代码。我有这个页面的示例代码 HTML代码： <body> <canvas id="canvas"></canvas> </body> JAVASCRIPT代码：

我想在马克杯上写文本，并通过Javascript、Html5更改字体样式、颜色、大小等属性。现在我正在使用Javascript，Html5。

我想在这个杯子图像上写文字，还想更改字体颜色、字体大小、字体样式和旋转文字
我看到了这个链接，但我并不满意。我不能给你原始代码。我有这个页面的示例代码

HTML代码：

  <body>
    <canvas id="canvas"></canvas>
  </body>

JAVASCRIPT代码：

$(function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var productImg = new Image();
productImg.onload = function () {
    var iw = productImg.width;
    var ih = productImg.height;
    console.log("height");

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
                  0, 0, iw, ih);

    //start();

    // outline
    ctx.beginPath();
     ctx.moveTo(88, 235.734375);
     ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
     ctx.stroke();
};
productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";

var img = new Image();
img.onload = start;
img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
var pointer = 0;


function start() {

    var iw = img.width;
    var ih = img.height;

    var xOffset = 125,
        yOffset = 122;

    var a = 122.0;
    var b = 30.0;

    var scaleFactor = iw / (2*a);

    // draw vertical slices
    for (var X = 0; X < iw; X+=1) {
      var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation
      ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
    }
}

$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var productImg=新图像（）；
productImg.onload=函数（）{
var iw=产品img.width；
var ih=产品高度；
控制台。原木（“高度”）；
canvas.width=iw；
canvas.height=ih；
ctx.drawImage（productImg，0，0，productImg.width，productImg.height，
0,0,iw,ih）；
//start（）；
//轮廓
ctx.beginPath（）；
ctx.moveTo（88235.734375）；
ctx.bezierCurveTo（88234.734375204298327234.734375）；
ctx.stroke（）；
};
productImg.src=”https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";
var img=新图像（）；
img.onload=启动；
img.src=”http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
var指针=0；
函数start（）{
var iw=img.宽度；
var ih=img.高度；
var xOffset=125，
yOffset=122；
var a=122.0；
var b=30.0；
var scaleFactor=iw/（2*a）；
//绘制垂直切片
对于（变量X=0；X


}))
我只使用Javascript，Html5。我看到了这个链接
但是这个插件已经在Php中使用了。我不想在Php中使用此功能。
任何人有任何想法请与我分享。如果有人有不同的想法，也请与我分享
 使用fabric js库在画布中编写自定义文本

var canvas=newfabric.canvas（'canvas'）；
$（'#font'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
obj.setFontFamily（$（this.val（））；
}
canvas.renderAll（）；
});
函数addText（）{
var oText=new fabric.IText（'Tap and Type'，{
左:100,，
前100名，
});
canvas.add（oText）；
setActiveObject（oText）；
$（'fill，'font'）。触发器（'change'）；
oText.bringToFront（）；
}

添加自定义文本
arial
塔荷马
新罗马时代


请包含一些代码。这个杯子是a型的还是a型的？为什么画布中的文本不够，它满足了您提到的所有要求。