在我的代码中，我可以将文本引入画布，还可以更改颜色和位置。我试图为文本输入设置自定义字体，但它不起作用（它仍然是我认为是 Arial 的标准字体）。你能帮我解决这个问题吗？这是我的 JsFiddle 代码：https: //jsfiddle.net/x6dqox1t/。谢谢您的时间。
这是我的 CSS 代码：
#canvas3 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
#canvas4 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
.green {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #009933;
}
.green:hover,
.green:active,
.green:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.red {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #ff0000;
}
.red:hover,
.red:active,
.red:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.orange {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: orange;
}
.orange:hover,
.orange:active,
.orange:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
@font-face {
font-family: 'KulminoituvaRegular';
src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}
这是我的 JAVASCRIPT 代码：
var canvas3 = document.getElementById("canvas3");
var ctx3 = canvas3.getContext("2d");
ctx3.font = " bold 90px KulminoituvaRegular";
ctx3.fillStyle = "black";
ctx3.textAlign = "center";
var $text3 = document.getElementById("sourceText3");
$text3.onkeyup = function(e) {
redrawTextsCan3();
}
function redrawTextsCan3() {
ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
wrapText(ctx3, $text3.value, 66.5, 82, "KulminoituvaRegular");
}
function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
var words = text.split(' ');
var line = '';
var lineHeight = fontSize;
context.font = fontSize + " " + fontFace;
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
return (y);
}
var loc = document.getElementById("canvas3");
var ctxx = loc.getContext("2d");
function path3(v2) {
switch (v2) {
// top: 103px; left: 210px
case "rightabove":
loc.style.top = "93px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "rightbelow":
loc.style.top = "133px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "left":
loc.style.top = "113px";
loc.style.left = "400px";
loc.style.position = "absolute";
break;
case "center":
loc.style.top = "113px";
loc.style.left = "173px";
loc.style.position = "absolute";
break;
}
redrawTextsCan3();
}
function color3(v4) {
v4 = v4.dataset.id;
switch (v4) {
// top: 103px; left: 210px
case "black":
ctx3.fillStyle = '#000000';
break;
case "red":
ctx3.fillStyle = "#ff0000";
break;
case "green":
ctx3.fillStyle = "#009933";
break;
case "orange":
ctx3.fillStyle = "#ff9900";
break;
}
redrawTextsCan3();
}
这是 HTML 代码：
<div>
<select name="change1" onchange="path3(this.value)">
<option value="left">Left</option>
<option value="center" selected>Center</option>
<option value="rightabove">Right Above</option>
<option value="rightbelow">Right Below</option>
</select>
<h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>
<button type="button" class="black" data-id="black" onclick="color3(this)">
</button>
<button type="button" class="red" data-id="red" onclick="color3(this)">
</button>
<button type="button" class="green" data-id="green" onclick="color3(this)">
</button>
<button type="button" class="orange" data-id="orange" onclick="color3(this)"></button>
<h3 style="font-size: 15px;padding-top: 0px">Number</h3>
<input id="sourceText3" maxlength="1" type="text" style="height: 32px;width: 223px;">
<canvas id="canvas3" width="150" height="150" style="position: absolute; top: 113px; left: 400px; z-index: 10;"></canvas>
</div>
您的字体不起作用的原因是字体源 ( http://www.miketaylr.com/f/kulminoituva.ttf ) 是通过 http 加载的，而 jsfiddle 是通过 https 加载的。所以你会得到一个混合内容错误。
我已将该字体上传到 GitHub，然后使用RawGit生成源链接。
var canvas3 = document.getElementById("canvas3");
var ctx3 = canvas3.getContext("2d");
ctx3.font = "90px MyFont";
ctx3.fillStyle = "black";
ctx3.textAlign = "center";
var $text3 = document.getElementById("sourceText3");
$text3.onkeyup = function(e) {
redrawTextsCan3();
}
function redrawTextsCan3() {
ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
wrapText(ctx3, $text3.value, 66.5, 82, "MyFont");
}
function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
var words = text.split(' ');
var line = '';
var lineHeight = fontSize;
context.font = fontSize + " " + fontFace;
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
return (y);
}
var loc = document.getElementById("canvas3");
var ctxx = loc.getContext("2d");
function path3(v2) {
switch (v2) {
// top: 103px; left: 210px
case "rightabove":
loc.style.top = "93px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "rightbelow":
loc.style.top = "133px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "left":
loc.style.top = "113px";
loc.style.left = "400px";
loc.style.position = "absolute";
break;
case "center":
loc.style.top = "113px";
loc.style.left = "173px";
loc.style.position = "absolute";
break;
}
redrawTextsCan3();
}
function color3(v4) {
v4 = v4.dataset.id;
switch (v4) {
// top: 103px; left: 210px
case "black":
ctx3.fillStyle = '#000000';
break;
case "red":
ctx3.fillStyle = "#ff0000";
break;
case "green":
ctx3.fillStyle = "#009933";
break;
case "orange":
ctx3.fillStyle = "#ff9900";
break;
}
redrawTextsCan3();
} #canvas3 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
#canvas4 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
.green {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #009933;
}
.green:hover,
.green:active,
.green:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.red {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #ff0000;
}
.red:hover,
.red:active,
.red:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.black {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: black;
}
.black:hover,
.black:active,
.black:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.orange {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: orange;
}
.orange:hover,
.orange:active,
.orange:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
@font-face {
font-family: 'MyFont';
src: url('https://cdn.rawgit.com/BlazingFire007/Misc/d656d2e6/kulminoituva.ttf');
}<div>
<select name="change1" onchange="path3(this.value)">
<option value="left">Left</option>
<option value="center" selected>Center</option>
<option value="rightabove">Right Above</option>
<option value="rightbelow">Right Below</option>
</select>
<h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>
<button type="button" class="black" data-id="black" onclick="color3(this)"></button>
<button type="button" class="red" data-id="red" onclick="color3(this)"></button>
<button type="button" class="green" data-id="green" onclick="color3(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="color3(this)"></button>
<h3 style="font-size: 15px;padding-top: 0px">Number</h3>
<input id="sourceText3" maxlength="2" type="text" style="height: 32px;width: 223px;">
<canvas id="canvas3" width="150" height="150" style="position: absolute; top: 113px; left: 400px; z-index: 10;"></canvas>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句