Question

我使用HTML画布分别编码徽标。现在，我想将它添加到我拥有的网站原型的代码中。问题是，每当我尝试将代码添加到网站时，它都不会出现。它留下了一个巨大的空间，图像应该出现，但没有别的。

这是我尝试添加到网站的徽标的.js代码：

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.shadowColor = "black";
  context.shadowOffsetX = 5; 
  context.shadowOffsetY = 5; 
  context.shadowBlur = 6;

  context.beginPath();
  context.arc(150, 96, 50, 0, Math.PI, false);
  context.closePath();
  var grd=context.createRadialGradient(90,100,3,90,40,100);
  grd.addColorStop(0.5,"33c3e3");
  grd.addColorStop(0,"a7eaf9");
  grd.addColorStop(1,"00cccc");

  context.fillStyle = grd;
  context.fill();

  context.font = "15px Georgia";
  context.fillStyle = "#003366";
  context.textAlign = "center";
  context.fillText("Design This Site", canvas.width/2, canvas.height/3.5); 


  context.beginPath();
  context.arc(150, 60, 50, 0, Math.PI, true);
  context.closePath();

  context.fillStyle = '#33c3e3';
  context.fill();

这是我的网站的代码，它不会出现。（我在＃34;包装器＆＃34;类中包含了非工作的.js，我在测试时最初将它放在那里）：

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="newstyle.css">
</head>

<title>Prototype Contact Page</title>

<body>

<div class="wrapper">

<canvas id="myCanvas" width="200" height="200"></canvas>
<script src="canvas2.js"></script>

<div class="flex-container">
<div class="flex-item item1">

<nav>
<ul style="list-style-type:none">

   <li><a href="--">Home</a></li>

   <li><a href="--">About Me</a></li>

   <li><a href="--">Contact</a></li> 

 </ul>
 </nav>
 </div>

<div class="flex-item item2">

<h3>Contact Me!</h3><hr><br>

 What's Your Name?<br>
<input type="text" name="flname" placeholder="First Name, Last Name">
 <br>

Email<br>
<input type="email" name="email" placeholder="youremail@site.com">
<br>

 Reason for Contacting<br>
<input type="text" name="contactreason" placeholder="Reason for contacting me"><br>

 Your Message<br>
 <textarea name="message" rows="10" cols="20">Your message...</textarea><br><br>

<input type="submit" value="Submit"> |  <input type="reset">

 </form>
</div>

 <div class="flex-item item3">

<h4>New Site Updates!
<hr>
Portfolio Samples Added [10.14.2016]<br><br>
Links Added [10.14.2016]</h4>
</div>

</div>

 </html>

Answer 1

在您的颜色代码前面加上英镑符号，如下所示：

grd.addColorStop(0.5,"#33c3e3");
grd.addColorStop(0,"#a7eaf9");
grd.addColorStop(1,"#00cccc");

HTML画布图像不显示？

1 个答案: