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

HTML畫布圖像未顯示？

問題描述

1 個解決方案

解決方案1
0 2016-12-05 23:44:19

HTML畫布圖像未顯示？

問題描述

1 個解決方案

解決方案1 0 2016-12-05 23:44:19

解決方案1
0 2016-12-05 23:44:19