canvas完全无法显示的问题

最新推荐文章于 2023-08-29 22:48:34 发布

FanBro

最新推荐文章于 2023-08-29 22:48:34 发布

阅读量8k

点赞数 1

分类专栏： web开发文章标签： html canvas

本文链接：https://blog.csdn.net/slwbcsdn/article/details/52830469

版权

web开发专栏收录该内容

7 篇文章 7 订阅

订阅专栏

第一，使用canvas标签时script标签要放在body的下面，放在head里面就可能显示不出来。想起上次做火焰特效，script放到head中，帧数明显下降。这里貌似涉及到JS性能优化和浏览器如何渲染HTML文件的问题（算了不深究了）。
第二，别再把方法和函数名写错了。
下面是W3C教程上的演示代码，只修改了图片的位置：

<!DOCTYPE html>
<html>
<body>

<p>要使用的图像：</p>
<img id="tulip" src="p.jpg" alt="The Tulip" />

<p>画布：</p>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

第三个问题：运行在Chrome上会出现以下两种情况1.加载不出来，始终加载不出来2.第一次加载出来了，刷新一下就没有了。解决这个问题的方法：

ctx.drawImage(img,10,10);

改

window.onload=function(){ctx.drawImage(img,10,10);}

FanBro

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas完全无法显示的问题

第一，使用canvas标签时script标签要放在body的下面，放在head里面就可能显示不出来。想起上次做火焰特效，script放到head中，帧数明显下降。这里貌似涉及到JS性能优化和浏览器如何渲染HTML文件的问题（算了不深究了）。第二，别再把方法和函数名写错了。下面是W3C教程上的演示代码，只修改了图片的位置：<!DOCTYPE html><html><body><p>要使用的
复制链接

扫一扫