关于html5 canvas元素为啥在chrome和火狐里都显示不了。去掉 if (canvas == null) return false;才行

Posted 2023-05-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于html5 canvas元素为啥在chrome和火狐里都显示不了。去掉 if (canvas == null) return false;才行相关的知识，希望对你有一定的参考价值。

<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas')
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0, 0, 100, 100);

//设置纯色
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);

//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明

context.fillStyle = "red";

context.fillRect(240,0 , 100, 100);
context.fillStyle = "rgba(255,0,0,0.2)";
context.fillRect(240, 120, 100, 100);
</script>
</body>
</html>

估计你刚学javascript吧，return不能用在“外部”。return需要在“函数内部”。

function test()
    var canvas = document.querySelector(\'canvas\');
    if (!canvas) alert(\'浏览器不支持\');
    console.log(canvas)

test()

<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
function create()
  var canvas = document.getElementById(\'myCanvas\')
  if (canvas == null) return false;
  var context = canvas.getContext("2d");
  //实践表明在不设施fillStyle下的默认fillStyle=black
  context.fillRect(0, 0, 100, 100);
  //设置纯色
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.strokeStyle = "blue";
  context.fillRect(0, 120, 100, 100);
  context.strokeRect(120, 120, 100, 100);
  //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
  context.fillStyle = "red";
  context.fillRect(240,0 , 100, 100);
  context.fillStyle = "rgba(255,0,0,0.2)";
  context.fillRect(240, 120, 100, 100);

create()
</script>
</body>
</html>追问

但是在另外一台电脑上就运行出来了。。

参考技术A 打个断点，看卡canvas变量拿到的值是什么！参考技术B 额，，看错了。。

android html5 canvas 为啥不捕获画线？

【中文标题】android html5 canvas 为啥不捕获画线？【英文标题】：android html5 canvas why not capture draw line?android html5 canvas 为什么不捕获画线？ 【发布时间】：2016-08-12 18:27:59 【问题描述】：

这是html5绘画测试应用

不捕获线

选项卡未捕获 click screenShot

Galaly 4 被捕获 click screenShot

【问题讨论】：

嗨 SundayPark，您应该在 GitHub 上您尝试使用的库的问题部分提出这个问题：github.com/JooilPark/testScreenShot/issues 好的，打开我的问题。 【参考方案1】：

添加 webView 选项

mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

是选项使用。

捕获确定。

【讨论】：

以上是关于关于html5 canvas元素为啥在chrome和火狐里都显示不了。去掉 if (canvas == null) return false;才行的主要内容，如果未能解决你的问题，请参考以下文章