通过Javascript，HTML5通过键盘从用户在杯子上编写自定义文本

Question

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

我想在此马克杯图像上写文本，还想更改字体颜色，字体大小，字体样式和旋转文本。
我看到了此链接，但我不满意。 如何在HTML5 canvas元素上写文本？ 我不能给你原始代码。 我有此页面的示例代码。

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);
    }
}

}）;

我只使用Javascript Html5。 我已经看到了此链接http://varunpes.net46.net/Fancy_Product_Designer_V3.0.7/example/cust-txt.jsp，但是此插件已在PHP中使用。 我不想在PHP中使用此功能。 任何人有任何想法请与我分享。 如果任何人有不同的想法，也可以与我分享。

Answer 1

使用fabric js库在画布中编写自定义文本。

 var canvas = new fabric.Canvas('canvas'); $('#font').change(function(){ var obj = canvas.getActiveObject(); if(obj){ obj.setFontFamily($(this).val()); } canvas.renderAll(); }); function addText() { var oText = new fabric.IText('Tap and Type', { left: 100, top: 100 , }); canvas.add(oText); canvas.setActiveObject(oText); $('#fill, #font').trigger('change'); oText.bringToFront(); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <div class="container"> <div class="row"> <div class="col s12"> <button class="btn" onclick="addText()">Add Custom Text</button> <select class="browser-default" id="font"> <option>arial</option> <option>tahoma</option> <option>times new roman</option> </select> <br /> <canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas> </div> </div> </div>

通过Javascript，HTML5通过键盘从用户在杯子上编写自定义文本

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-05-19 05:16:38

通过Javascript，HTML5通过键盘从用户在杯子上编写自定义文本

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-05-19 05:16:38

解决方案1
0 已采纳 2016-05-19 05:16:38