gpt4 book ai didi

javascript - 使用 Canvas ,我得到一个空白屏幕,试图用阴影打印标题 1 和标题 2

转载 作者:太空宇宙 更新时间:2023-11-04 11:10:53 30 4
gpt4 key购买 nike

非常感谢任何帮助。我找不到代码中的错误。我怀疑这是函数 doFirst 中的问题。在 thenewboston.com 上观看了教程,按照所有说明进行操作,但找不到原因。你能看到发生了什么吗?提前致谢问候!

Javascript 文件:

function doFirst(){
var x= document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'rgba(0,0,255,.5)';
canvas.textAlign = "end";
canvas.fillText("<h1>Welcome to the Kule's web site! + "<br/>" + "<h2>Under construction...</h2>"<h1>, 300, 100);
}

window.addEventListener("load", doFirst, false);

索引.html

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>

<title>Ivan Kusakovic | Qle </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>

<script src="javascript/scripting.js"></script>

</head>
<body onLoad="onLoadFunkcija()" >

<script type="text/javascript">
var i = prompt("Enter your name: ");
document.write(i+ ", thanks for visiting site. Play the music in the bottom of the page if you want :) ");

function onLoadFunkcija(){
alert('Hello guest, have a nice day!');
}
</script>


<section id="main">
<canvas id="canvas" width="600" height="300">

</canvas>
</section>
<a href="SecondPage.html">Some page</a><br>
<a href="GuestBook.html">Sign in to the guest book</a>

最佳答案

"<h1>Welcome to the Kule's web site! + "<br/>" + "<h2>Under construction...</h2>"<h1>

首先,您尝试打印的字符串已完全损坏。你在 site! 之后没有关闭它你在<h1>之前关闭它太早了, 应该是 </h1> .而且您的 HTML 也被破坏了,因为您不能将 h2 包装在 h1 中。最后,你可以把它写在一个字符串中,我不知道你为什么把它分成几部分。

"<h1>Welcome to the Kule's web site!</h1><h2>Under construction...</h2>"

但这根本不重要,因为您无法在 Canvas 中打印 HTML。如果您只需要标题,只需在 Canvas 前用 HTML 编写即可。


如果您想使用 Canvas 绘制文本,则必须使用 Canvas 上下文对象上的样式属性。您可以阅读更多关于 canvas style properties 的信息这里和关于 drawing text here .

要在字符串中换行,您通常可以使用 \n , 但 Canvas 似乎不支持它。您必须手动为每条线调用绘图函数。

canvas.fillText("Welcome to the Kule's web site!", 300, 100);
canvas.fillText("Under construction...", 300, 120);

Fiddle demo .

关于javascript - 使用 Canvas ,我得到一个空白屏幕,试图用阴影打印标题 1 和标题 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33632297/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com