我想在杯子上写文字。并通过 Javascript、Html5 更改字体样式、颜色、大小等属性。现在我正在使用 Javascript，Html5。
我想在这张马克杯图片上写文字，还想更改字体颜色、字体大小、字体样式和旋转文字。
我看到了这个链接，但我不满意。
How can I write text on a HTML5 canvas element?
我不能给你原始代码。我有此页面的示例代码。
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 中使用此功能。 任何人有任何想法请与我分享。如果任何人有不同的想法，也请与我分享。
最佳答案
使用 fabric js 库在 Canvas 中编写自定义文本。
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 - 通过 Javascript、Html5 通过键盘在用户的杯子上写自定义文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34353956/