HTML画布图像未显示？

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

这是我的网站的代码，该代码不会显示。 （我在测试时最初将其放置在“包装器”类下的非工作.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");