canvas ctx.stroke()无法正常工作/显示(Javascript、Chrome)
canvas ctx.stroke()是HTML5中用于绘制路径的方法之一，它用于绘制路径的轮廓。如果canvas ctx.stroke()无法正常工作或显示，可能是由于以下几个原因：
- 代码错误：请确保在调用ctx.stroke()之前已经正确定义了路径，并且路径的属性（如颜色、线宽等）已经设置正确。另外，还需要确保在调用ctx.stroke()之前已经调用了ctx.beginPath()方法来开始一个新的路径。
- 元素未正确获取：在使用canvas绘图时，需要确保canvas元素已经正确获取。可以使用document.getElementById()方法获取canvas元素，并将其赋值给一个变量，然后使用该变量来操作canvas。
- 上下文环境错误：请确保在调用ctx.stroke()之前已经获取了正确的上下文环境。可以使用canvas.getContext('2d')方法来获取2D绘图上下文环境。
- 浏览器兼容性问题：不同的浏览器对canvas的支持程度有所不同，可能会导致某些方法无法正常工作或显示。在使用canvas时，建议使用最新版本的浏览器，并检查浏览器是否支持canvas以及相关方法。
总结： canvas ctx.stroke()方法用于绘制路径的轮廓，如果无法正常工作或显示，可能是代码错误、元素未正确获取、上下文环境错误或浏览器兼容性问题所导致。在使用时，需要确保路径已正确定义并设置了正确的属性，canvas元素已正确获取，正确的上下文环境已获取，并使用支持canvas的最新版本浏览器。
相关·内容
我在画布上有网络摄像头流，但在顶部显示矩形时遇到问题。网络摄像头流工作正常。问题是矩形不会出现，有时，矩形会快速闪现(而且非常模糊……)const canvas = document.querySelector('.photo');}).catch(err => {});
// Applies the webcam
浏览 12提问于2017-08-23得票数 1
我无法绘制我的HTML5画布，直到页面重新加载到Google上，它在火狐上才能正常工作。, canvas.height);
ctx.moveTo(100, 150); ctx.stroke();};在小提琴中显示时，一切都很好，因为HTML网页嵌入了iframe。复制步骤：打开Google，打开一个新选项卡，转到，然后按enter键
浏览 3提问于2013-07-30得票数 1
回答已采纳
4回答
我想要一个Canvas以100%的宽度和100%的高度：标记： <canvas id="myCanvas"></canvas> height: 100%;} width: 100%;}
Javascript=
浏览 5提问于2013-06-21得票数 8
4回答
我在body onmousemove函数上使用这个脚本： // Get the context and the canvas: var context = canvas.getContext("2d"); contex
浏览 2提问于2012-11-18得票数 45
回答已采纳
例如，我在Galaxy Tab27.0上进行了测试，一切工作正常。我在Android浏览器、Chrome、FF、Opera和Maxthon上进行了测试。没有问题。现在在我的Galaxy Note2上测试，我想知道为什么它不能在Chrome上工作。没有错误。我的javascript运行得很好。但是输入不会呈现到我的画布上。在Android浏览器中，它的工作方式与预期一致。
有什么想法吗？ctx.lineTo(evt.pageX - el.offsetLeft, evt.p
浏览 3提问于2013-06-04得票数 2
我试图使用Canvas2DAPI的属性擦除画布中的笔画，但它不起作用。Your browser does not support the HTML5 canvas tag.</canvas>(只有当我将第二个ctx.stroke();乘以几次时，中风才会消失)。
我的目标是在javascript对象
浏览 0提问于2018-08-13得票数 0
回答已采纳
下面的代码与3个画布完美地工作在最新的IE和Mozilla FireFox上。第三个画布(#drawingSurface3)在Google Chrome上失败，在开发人员控制台中没有任何错误。="scripts/jquery-1.8.2.js"></script>
浏览 1提问于2012-11-07得票数 0
回答已采纳
var canvas = document.getElementsByTagName('canvas')[0];ctx.moveTo(0, 0);ctx.lineTo(100, 100);在Chrome中，小提琴显示出
浏览 3提问于2014-09-03得票数 1
回答已采纳
帆布笔画()在铬版44中似乎坏了参见测试：点击测试按钮在FF/IE中工作得很好，甚至边缘。网格不显示在Chrome，但过去？var canvas = document.getElementById("drawing"); if(canvas !ctx.lineWidth = 0.5;
浏览 0提问于2015-08-04得票数 0
回答已采纳
我正在使用html5画布+一些javascript (onmousedown/move/up)在网页上创建简单的绘制板。在Opera、Firefox、Chrome等浏览器中工作正常(在台式机上试用)。但是如果我使用iPhone访问这个页面，当我试图在画布上绘图时，它会拖动或滚动页面。作为参考，这里有一个最小的例子：function
浏览 2提问于2012-04-02得票数 12
回答已采纳
1回答
当呈现为100%时，Chrome和Firefox可以处理以下代码。<html> <script type="application/x-javascript"> ctx.stroke(); }c
浏览 3提问于2014-11-27得票数 1
回答已采纳
如果在将<script>放入文档的<head>中时使用HTML canvas绘制图形，则无法正常工作。例如： <script> if(canvas.getContext); </scr
浏览 4提问于2017-01-29得票数 2
回答已采纳
1回答
我在画布上画了各种形状和文字，但浏览器中没有显示任何东西。Chrome的控制台没有错误。我在另一个浏览器中打开它，认为这可能是缓存的问题，但除了“绘制画布”按钮显示之外，什么也没有。</button><br><br> <&#x
浏览 3提问于2016-04-03得票数 0
回答已采纳
以下代码在除IE之外的其他浏览器中工作正常。我的代码是： alert("fdgdfgdfg"); var ctxrltvY); ctx.strokeStyle = x;
ctx.lineWidth
浏览 0提问于2013-02-12得票数 1
回答已采纳
我在一页纸上有一张画布，后面有一些文字：<p>Some text after thecanvas</p> { ctx.stroke();
浏览 3提问于2015-04-28得票数 4
回答已采纳
Javascript代码可以在codepen上工作，但是当我使用vscode测试它时，形状不会出现，下载按钮也不能工作，所以javascript代码不能工作。const canvas = document.getElementById('canvas');const downloaddocument.getElementById(
浏览 57提问于2020-11-13得票数 0
回答已采纳
下面是代码：<html lang="en"> <meta charset="utf-8" /></html>function draw() {
var canvas = document.getElementById('<em
浏览 0提问于2017-10-24得票数 0
回答已采纳
如何使用jQuery在HTML canvas上绘制一条简单的线条？<!-- I want jQuery to draw a line here -->
//I would likethe line to draw when the document loads.注意..我不寻找它来绘制或
浏览 0提问于2012-07-03得票数 2
回答已采纳
1回答
下载画布作为PNG映像
、、、、
当我尝试以PNG图像的形式下载画布时，浏览器在一个新页面中打开图像，但不要下载它.我的下载代码： console.log("Download... ");
this.download = "filename";有一种方法可以简单地下载吗？抱歉英语不好，我是意大利人
浏览 4提问于2016-05-02得票数 1
回答已采纳
1回答
我想画一幅画布和一条线，但是JavaScript控制台显示：“null不是一个对象(计算‘c.getContext’)”。<html><script src="provaCanvas.js" type="text/javascript"></script><body>
&l
浏览 0提问于2020-09-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
