这两天在学习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-05-对象（object）

    一.访问对象属性的两种方法 a:objectName.PropertyName     对象名.属性名 b:objectName["PropertyName"]     对象名[“ ...

  2. mongodb主备配置

    前言:mongodb目前推荐的方式是副本集的方式实现,但是副本集需要三台服务器,目前配置为主备方式 假设你已经安装好了mongo,并配置好了响应的用户 下面修改mongodb.conf配置文件,开启认 ...

  3. Sunset: Vulnhub Walkthrough

    主机扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.147 PORT STATE SERVICE VERSION21/tcp open ftp pyftpdlib 1.5 ...

  4. 【计算机网络】ISO/OSI 网络体系结构

    ISO/OSI 网络体系结构 计算机网络是相当复杂的系统,相互通信的两个计算机系统必须高度协调才能正常工作.为了设计这样复杂的计算机网络,人们提出了将网络分层的方法.分层可将庞大而复杂的问题转换为若干 ...

  5. Flask的session

    ### session:1. session的基本概念:session和cookie的作用有点类似,都是为了存储用户相关的信息.不同的是,cookie是存储在本地浏览器,session是一个思路.一个 ...

  6. ubuntu 查看端口被占用并删除端口

    做网络的同学,估计会经常用到这个功能,这里就做一个记录吧. 首先查看特定端口是占用了: sudo netstat -nplt 其次要删除特定端口并查看: kill -9 pid_num sudo ne ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  8. SpringCloud的入门学习之概念理解、Eureka服务注册与发现入门

    1.微服务与微服务架构.微服务概念如下所示: 答:微服务强调的是服务的大小,它关注的是某一个点,是具体解决某一个问题.提供落地对应服务的一个服务应用,狭意的看,可以看作Eclipse里面的一个个微服务 ...

  9. PlayJava Day015

    今日所学: /* 2019.08.19开始学习,此为补档. */ StringBuffer 定义: 可变字符序列 - 线程安全的 作用:基本与String相同,也是用于描述字符串 与String的区别 ...

  10. 爬虫selenium中截图

    一.整个页面截图 driver = webdriver.Chrome() driver.get(url) diver.save_screenshot('保存路径') 二.局部截图 driver = w ...