极客观点
项目管理
HarmonyOS
问题描述
找到一个使用 Canvas + WebFont 绘制的报错页面，但是示例代码运行会报错。
相关代码
主页代码 index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - 500 Error - Animated text fill </title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="Wrapper">
<div class="left">Error</div>
<div class="right">Error</div>
<canvas id="five" width="550" height="205"></canvas>
</div>
<h1>Error :(</h1>
<p>It's always time for a coffee break. </p>
<p>We should be back by the time you finish your coffee.</p>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>样式表 style.css
@import url('https://fonts.googleapis.com/css?family=Righteous');
body{
background-color: #000;
color:red;
}
.Wrapper{
width:540px;
height:200px;
display:none;
margin:4% auto 0;
max-width:100%;
max-height:100%;
position:relative;
overflow:hidden;
}
#five{
z-index: 10;
position: absolute;
}
.left{
z-index: 1;
width: 550px;
height: 200px;
position: absolute;
overflow:hidden;
}
.right{
z-index: 1;
width: 550px;
height: 200px;
position: absolute;
overflow:hidden;
left:80%;
}
h1{
color:#000;
background:red;
padding: 10px;
border-radius:50px;
width:150px;
margin:30px auto 10px;
text-align:center;
font-size:1em;
font-family: 'Righteous', sans-serif;
display:none;
}
p{
width:350px;
margin:0px auto;
text-align:center;
font-family: 'Righteous', sans-serif;
display:none;
}script.js
WebFontConfig = {
google:{ families: ['Righteous'] },
active: function(){FiveOhFiveFont();},
};
(function(){
var wf = document.createElement("script");
wf.src = 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.5.10/webfontloader.js';
wf.async = 'true';
document.head.appendChild(wf);
})();
var FiveOhFive = document.getElementById("five");
var FiveOhFiveContext = FiveOhFive.getContext("2d");
FiveOhFiveFont(FiveOhFiveContext, FiveOhFive); FiveOhFiveContext.globalCompositeOperation = 'destination-out';
function FiveOhFiveFont(ctx, canvas) {
FiveOhFiveContext.fillText("500", 275, 100);
var grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grad.addColorStop(0, '#000');
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = grad;
ctx.fill();
ctx.fillStyle = "red";
ctx.font = "15em Righteous";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
}
var WrapperW = $('.Wrapper').width();
var WrapperH = $('.Wrapper').height();
$('.left').click(function() {
for (var j = 1; j <= 500; j++){
var X = (Math.random()*WrapperW)%(WrapperW>>0);
var Y = (Math.random()*WrapperH)%(WrapperH>>0);
var nTop = Math.floor((Math.random()*WrapperW));
var nLeft = Math.floor(((Math.random()*WrapperH)));
var $child = $(this).clone();
$('.Wrapper').append($child);
$child.css({ top:X, left: -200+Y })
.animate({ top: nTop+'px', left:50+nLeft+'px' }, 8000)}
});
$('.right').click(function() {
for (var j = 1; j <= 500; j++){
var X = (Math.random()*WrapperW)%(WrapperW>>0);
var Y = (Math.random()*WrapperH)%(WrapperH>>0);
var nTop = Math.floor((Math.random()*WrapperW));
var nLeft = Math.floor(((Math.random()*WrapperH)));
var $child = $(this).clone();
$('.Wrapper').append($child);
$child.css({ top:X, left: 500+Y })
.animate({ top: nTop+'px', left:270+nLeft+'px' }, 8000)}
});
$("document").ready(function() {
$(".Wrapper,h1,p").fadeIn(100);
setTimeout(function() {
$(".right, .left").trigger('click');
},0);
});你期待的结果是什么？实际看到的错误信息又是什么？
可见控制台报错
Uncaught TypeError: Cannot read properties of undefined (reading 'createLinearGradient')
at FiveOhFiveFont (script.js:21:18)
at Object.active (script.js:5:22)
at N (webfontloader.js:15:1156)
at oa (webfontloader.js:21:395)
at T.ka (webfontloader.js:20:235)
at S (webfontloader.js:19:331)
at ka (webfontloader.js:19:223)
at ja.start (webfontloader.js:18:282)
at na (webfontloader.js:19:716)
at webfontloader.js:23:239求助大伙儿帮忙看看问题在哪，如何解决，顺便说一下问题的解决思路，谢谢
