JavaScript——关于画布元素canvas的使用

最新推荐文章于 2022-03-30 09:06:22 发布

jsdchenye

最新推荐文章于 2022-03-30 09:06:22 发布

阅读量836

点赞数

分类专栏： JavaScript 文章标签： javascript canvas DOM

本文链接：https://blog.csdn.net/jsdchenye/article/details/47907179

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在chrome中使用getContext()方法来判断某一浏览器是否支持<canvas>元素时，使用了如下方法在页面中绘制一个指定大小的矩形。

<!DOCTYPE >

<html>
<head>
<title></title>
<meta charset='UTF-8'>
<script type="text/javascript">
var drawing=document.getElementById("drawing");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.fillStyle="red";
context.fillRect(10,10,50,50);
}
</script>
</head>
<body>
<canvas id="drawing" width="200" height="200" style=" background:yellow ">HaHa</canvas>
</body>
</html>

打开网页之后没有实际的显示效果。后来通过调用chrome中的调试工具Sources窗口，在Console控制台中发现了一个错误提示：Cannot read property 'getContext' of null。经过查找发现chrome中需要等待文档载入完成之后才能够获得canvas对象。将javascript的代码移到<body>标签的最后，就可以实现对应的功能。