这两天在学习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浏览器中不能显示的问题的更多相关文章

  1. 解决爬虫浏览器中General显示 Status Code:304 NOT MODIFIED，而在requests请求时出现403被拦截的情况。

    在此,非常感谢 “完美风暴4” 的无私共享经验的精神    在Python爬虫爬取网站时,莫名遇到 浏览器中General显示  Status Code: 304 NOT MODIFIED 而在req ...

  2. 如何解决自定义404页面在IE等浏览器中无法显示问题

    网站设置自定义404页面之后(如何在IIS下正确设置404页面?),如无法在浏览器中正常显示,可能是以下原因: 1.404页面文件权限设置错误 我们需要为404页面文件添加上用户everyone的可读 ...

  3. （二）给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

  4. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  5. readonly属性在各浏览器中的区别

    有个项目需求是正常显示时为只读,不可修改: 点击修改按钮后,可修改表单元素. 首先想到的是readonly属性,其用于规定输入字段为只读,不能修改.在javascript中消除readonly值,可将 ...

  6. 【HTML】html5新属性-datalist

    摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...

  7. 在网页浏览器中原生显示PDF文件

    在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...

  8. jsp网页在浏览器中不显示图片_eclipse环境下配置tomcat中jsp项目的虚拟路径

    遇到的问题是这种,在jsp网页中嵌入了本地的图片,由于会用到上传到服务器的图片,所以没有放到项目里面,而是把全部图片单独放到一个文件夹里,然后打算使用绝对路径把要显示的图片显示出来.比方是放在了E盘的 ...

  9. HTML5新属性-----拖放

    最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...

随机推荐

  1. git配置：本地仓库提交到远程仓库

    前提:1.已安装git 一:创建公钥,一台机子匹配一个公钥 桌面右键选择 Git Bash Here 打开命令行输入:ssh-keygen -t rsa -C "xxx@xxx.com&qu ...

  2. pgwSlideshow.js

    <!DOCTYPE html> <html> <head id="Head"> <meta http-equiv="Conten ...

  3. mysql从5.6升级到5.7后出现 Expression #1 of ORDER BY clause is not in SELECT list,this is incompatible with DISTINCT

    [问题]mysql从5.6升级到5.7后出现:插入数据和修改数据时出错Caused by: com.ibatis.common.jdbc.exception.NestedSQLException: - ...

  4. SpringCloudGateway开发详解

    路由简介: SpringCloudGateWay 是用于替代zuul作为API网关,在gateway中有三个重要的名词:过滤器,断言,路由 过滤器与断言是路由的一部分,路由便是将请求进行一系列的处理后 ...

  5. windows 下 安装vue环境 以及创建新项目 极简

    一.安装node.js(https://nodejs.org/en/) 官网下载安装 验证命令: node -v 二.安装npm npm install -g cnpm --registry=http ...

  6. 【测试基础】App测试要点总结

    测试工作过程中思维过程:测试人员常被看作Bug寻找者,程序的破坏者. 1.好的测试工程师所具备的能力: 细心的观察能力 有效的提问能力 产品的业务能力 好奇心 2.测试人员需要询问问题:测试人员的核心 ...

  7. SSH的 Write failed: Broken pipe 问题

    问题现象: 表示连接管道已经断开 解决方法: 方法一:客户端配置 在客户端的 ~/.ssh/ config文件(如不存在请自行创建)中添加下面内容: ServerAliveInterval 60 方法 ...

  8. RabbitMQ的管控台的使用说明

    1.RabbitMQ的管控台确实是一个好东西,但是如果是新手,比如刚接触RabbitMQ的时候,看到RabbitMQ的管控台也是一脸懵逼的说,慢慢接触多了,才了解一些使用. 1).RabbitMQ的管 ...

  9. 读后感：数据结构与算法JavaScript描述

    本书看完,对常见的数据结构与算法从概念上有了更深入的理解. 书中关于数组.栈和队列.链表.字典.散列.集合.二叉树.图.排序.检索.动态规划.贪心算法都有详细的介绍.算是一本不错的学习书籍. 栈和队列 ...

  10. 转：C# String为值类型还是引用类型

    关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助,如果有错误请指出. 来看下面例子: //值类型 int a ...