HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解:
例如在学习使用canvas时,需要绘制一个红色的原点,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
</head> <body>
<!--定义一块画布-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> <!--利用js在画布上绘制图案-->
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
</script> </body> </html>
效果如下:
但是,如果将js代码放置在head部分,效果就出不来了:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5画布</title> <!--利用js在画布上绘制图案-->
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
</script> </head> <body>
<!--定义一块画布-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> </body> </html>
效果如下:
真实郁闷啊,是我哪里搞错了吗?浏览器版本:
HTML5新属性在Google浏览器中不能显示的问题的更多相关文章
- 解决爬虫浏览器中General显示 Status Code:304 NOT MODIFIED,而在requests请求时出现403被拦截的情况。
在此,非常感谢 “完美风暴4” 的无私共享经验的精神 在Python爬虫爬取网站时,莫名遇到 浏览器中General显示 Status Code: 304 NOT MODIFIED 而在req ...
- 如何解决自定义404页面在IE等浏览器中无法显示问题
网站设置自定义404页面之后(如何在IIS下正确设置404页面?),如无法在浏览器中正常显示,可能是以下原因: 1.404页面文件权限设置错误 我们需要为404页面文件添加上用户everyone的可读 ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...
- readonly属性在各浏览器中的区别
有个项目需求是正常显示时为只读,不可修改: 点击修改按钮后,可修改表单元素. 首先想到的是readonly属性,其用于规定输入字段为只读,不能修改.在javascript中消除readonly值,可将 ...
- 【HTML】html5新属性-datalist
摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...
- 在网页浏览器中原生显示PDF文件
在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...
- jsp网页在浏览器中不显示图片_eclipse环境下配置tomcat中jsp项目的虚拟路径
遇到的问题是这种,在jsp网页中嵌入了本地的图片,由于会用到上传到服务器的图片,所以没有放到项目里面,而是把全部图片单独放到一个文件夹里,然后打算使用绝对路径把要显示的图片显示出来.比方是放在了E盘的 ...
- HTML5新属性-----拖放
最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
随机推荐
- apache commons lang架包介绍
commons lang组件介绍和学习 介绍 Java语言开发时有一个隐患,那就是java支持null值,这就导致很多时候操作可能会出异常. 因此很多第三方组件都会提供安全null safe 操作(即 ...
- TKinter容器frame使用
容器frame使用布局 https://www.cnblogs.com/anita-harbour/p/9315472.html TK控件使用大全 https://blog.csdn.net/rng_ ...
- 【pat】C++之刷题常用STL容器整理
1.vector 动态数组,方便的动态扩容,方便的变量初始化(int类型默认初始化为0,bool默认初始化为false),可以用来实现邻接表(结点数太多的图). 头文件 #include<vec ...
- Java 正则表达式_网络爬虫
首先 需要了解 一些 关于 网络爬虫的 基本知识: 网络爬虫: 所谓的 爬虫 就是一个 应用 程序, 这个 应用 程序 会 获取 网络中的 指定信息(网页 数据). 例如百度: 启动 这个 爬虫 程序 ...
- ETCD:gRPC代理
原文地址:gRPC proxy gRPC代理是在gRPC层(L7)运行的无状态etcd反向代理.代理旨在减少核心etcd群集上的总处理负载.对于水平可伸缩性,它合并了监视和租约API请求. 为了保护集 ...
- C# 管道通信 (client —— server)Framework2.0版本也可用
//管道服务类public class PipServer { [DllImport("kernel32.dll", SetLastError = true)] public st ...
- Web前端基础(16):jQuery基础(三)
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...
- Python的小数据存储,用什么格式更有逼格?
小数据存储 我们在编写代码的时候,经常会涉及到数据存储的情况,如果是爬虫得到的大数据,我们会选择使用数据库,或者excel存储.但如果只是一些小数据,或者说关联性较强且存在存储后复用的数据,我们该如何 ...
- 77777 77777(2) WriteUp 绕waf技巧学习
两个题的代码都是一样的 只是waf不一样 贴出代码 <?php function update_point($p,$point){ global $link; $q = sprintf(&quo ...
- hadoop免登录
参考:http://wenku.baidu.com/link?url=n4PT7AhGnV7N8KevSEAMcCVGEaYqTuKmNodCQsUnR7qtAnWM0WDs8pFYLOpCUu9R9 ...