2
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();
そして、ここではそれが表示されません私のサイトのコードです。このようようなあなたのカラーコードの前で
<!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>
コンソールにメッセージがありますか？あなたのスクリプトが見つかりましたか？ – Kaiido
コードを関数 'function myLogo（）{... your code here}'の中に入れてから、onloadイベント 'window.addEventListener（" load "、myLogo）を使ってその関数を呼び出してください。 – Blindman67
@Kaiido - 私はいませんメッセージが表示されます。イメージがあるはずの空白領域。私のスクリプトが見つかったかどうかはわかりません。 – hoshicchi