Uncaught TypeError: canvas.getContent is not a function at window onload

最新推荐文章于 2023-02-04 13:54:16 发布

朽木自雕xmzd

最新推荐文章于 2023-02-04 13:54:16 发布

阅读量3.5k

点赞数 1

分类专栏：前端文章标签： canvas 前端

本文链接：https://blog.csdn.net/qq_16687863/article/details/101913487

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

报错如下：test.html:18 Uncaught TypeError: canvas.getContent is not a function at window.onload (test.html:18)

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function(){
				var canvas  = document.querySelector('canvas');
				canvas.width = document.documentElement.clientWidth;
				canvas.height = document.documentElement.clientHeight;
				console.log(canvas);
				//这里是做浏览器兼容,有这个方法则创建画笔,没有则不创建
				if(canvas.getContent){
					console.log("123");// 没有进入这个
					var ctx = canvas.getContent('2d');
				}
				 //这里会报错,test.html:16 Uncaught TypeError: canvas.getContent is not a function at window.onload
				var ctx = canvas.getContent('2d');
			}
		</script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			canvas{
				position: absolute;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<canvas>
			<span>您的浏览器不支持画布元素，请使用谷歌浏览器</span>
		</canvas>
	</body>
</html>

解释：

HTML DOM getContext() 方法

HTML DOM Canvas 对象

定义和用法

getContext() 方法返回一个用于在画布上绘图的环境。

语法

Canvas.getContext(contextID)

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

返回值

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

描述

返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。

解决办法：

将content改成context

朽木自雕xmzd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Uncaught TypeError: canvas.getContent is not a function at window onload

报错如下：test.html:18 Uncaught TypeError: canvas.getContent is not a functionat window.onload (test.html:18)代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
复制链接

扫一扫