这两天在学习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. JS---DOM---总结获取元素的方式

    总结获取元素的方式 1. 根据id属性的值获取元素,返回来的是一个元素对象 document.getElementById("id属性的值"); document.getEleme ...

  2. Office2019新增哪些功能

    上一篇文章我们知道了office为什么没有2017/2018版本,那个是因为微软office是时隔三年一更新的软件,这不office2019就出来了.一款软件,只有不断的完善自身功能,进行不断的更新, ...

  3. November 10th, Week 45th, Sunday, 2019

    Perfection has no place in love. 爱从不完美. Perfection has no place in love, and we should always try to ...

  4. pycharm连接远程python的开发环境

    一.准备工作 1.远程主机配置python的开发环境(pyenv) 2.本地windowsp安装pycharm 二.配置pycharm连接 配置运行环境:

  5. Spring Cloud 如何搭建Config

    利用spring cloud 的 spring-cloud-config-server 组件 搭建自己的配置中心 config-server 配置文件可以存放在 github ,gitlab 等上面, ...

  6. Windows下使用virtualenv创建虚拟环境

    操作系统 : windowns10_x64Python版本:3.6.8virtualenv版本:16.7.7virtualenvwrapper版本:1.2.5 方式一:直接使用virtualenv 1 ...

  7. 超级简单的数组加单链表实现Map

    /** * 超级简单的数组加单链表实现Map * @author jlj * */ public class MyHashMap { public MyList[] lists; public int ...

  8. react使用moment进行日期格式化

    导入moment import moment from 'moment'; 使用方式 年月日,时分秒 moment().format('YYYY-MM-DD HH:mm:ss'); // 2019-0 ...

  9. C# 波浪线绘制

    波浪线效果如上 界面绘制操作 private Point? _startPoint = null; private void ContainerCanvas_OnPreviewMouseLeftBut ...

  10. .net Core数据的幕等性

    一.背景 代码实例:https://gitee.com/D_C_L/CurtainEtcAOP.git我们实际系统中有很多操作,是不管做多少次,都应该产生一样的效果或返回一样的结果. 例如: 1. 前 ...