HTML畫布圖片不顯示？

我使用HTML畫布單獨編碼了一個徽標。現在，我想將其添加到我擁有的網站原型的代碼中。問題是，每當我嘗試將代碼添加到網站時，它都不會顯示出來。它留下一個很大的空隙空間，圖像應該顯示，但沒有別的。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="[email protected]"> 
<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>

來源

2016-12-05 hoshicchi

控制檯中的任何消息？你的腳本被發現？ – Kaiido

嘗試把代碼放在一個函數'function myLogo（）{...你的代碼在這裏}'然後通過onload事件調用該函數'window.addEventListener（「load」，myLogo）' – Blindman67

@Kaiido - 我不是看到任何消息。只是圖像應該在的空白區域。不知道我的腳本是否被找到。 – hoshicchi

在你的顏色代碼前認沽英鎊符號像這樣：

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

來源

2016-12-05 23:44:19

謝謝！起初我沒有注意到！我添加了英鎊符號，但徽標仍然沒有顯示出來。 – hoshicchi

嗯，它在我看來這個小提琴。我把JS放在腳本標記中，並將你的引用替換爲canvas2.js。我也看到你有一個關閉標籤，但沒有打開。試着擺脫這可能嗎？ –

如果我附上小提琴會有所幫助。：D https://jsfiddle.net/wLrcmd67/ –

HTML畫布圖片不顯示？

回答

相關問題