javascript - Canvas 异常报错问题，何解？
问题描述
找到一个使用 Canvas + WebFont 绘制的报错页面，但是示例代码运行会报错。
相关代码
主页代码
<!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>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;}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求助大伙儿帮忙看看问题在哪，如何解决，顺便说一下问题的解决思路，谢谢
共有1个答案
active 那里改一下，你没有把对象传进去
active: function () {FiveOhFiveFont(FiveOhFiveContext, FiveOhFive)},-
假设有个点p（x,y），在原坐标系xoy下的坐标是（x,y）； 现在经过matrix（a,b,c,d,e,f）变换后得到新的坐标系x1o1y1, 那么怎么通过matrix和原来的（x,y）求出（x1，y1）的值。 p点的位置是固定的，不随坐标系变化而动。 求各位大神给出x1和y1的计算公式
-
百度商业账号常见问题 百度账号常见问题
-
问题内容： 我正在编写一个查找素数的程序。我将素数和所有正整数（现在到100）存储为两个。这是代码： 但是，当我运行该程序时，出现以下错误： 线程“主”中的异常java.lang.IndexOutOfBoundsException：索引：3，大小：3 at java.util.ArrayList.rangeCheck（ArrayList.java:653）at java.util.ArrayLis
-
报表服务分开部署运行时报错404 为什么报表数据只显示excel中select所在的那行的数据? 报表分页打印时最后一页数据不够一页补充空行 报表dialog模式链接提示“组件上没有定义打开连接的对话框”错误 报表中div计算的时候如果除数是0怎么写if else 报表默认设置横向打印 网格报表设置奇偶行背景色 分组报表按照分组的奇偶行设置背景颜色 报表中边框线的设置 报表中显示attachmen
-
问题内容： 我有一个关于异常处理的问题。考虑以下Java代码段。 我知道这是处理异常的推荐方法。但是我可以通过使用以下代码片段来实现相同的目的。 有人可以告诉我第二种方法的弊端吗？ 问题答案： 第二种方法可读性较差。此外，即使“聪明”的窍门是使用instanceof关键字，Pokemon异常处理也永远不会走。无论如何，我不是在取笑或嘲笑您，但最好是编写供人类阅读和维护的代码，而不是计算机。
-
升级到1.9.3+版本后编译失败 主要明显的就是IpUtils.getIp和request的.state报错。 这是因为从v1.9.3版本开始，对项目进行了一些优化，具体优化内容参考：v1.9.3 (opens new window)和v1.9.4 (opens new window)。 新版本的使用方式，参考JustAuth-demo (opens new window) @RequestMap