这两天在学习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. 升鲜宝V2.0_杭州生鲜配送行业，升鲜宝供应链B端订货系统使用说明_升鲜宝生鲜供应链管理系统_15382353715_余东升

    升鲜宝V2.0_杭州生鲜配送行业,升鲜宝供应链B端订货系统使用说明_升鲜宝生鲜供应链管理系统_15382353715             升鲜宝生鲜配送供应链系统经过这些年的发展,形成一套独特的订 ...

  2. 请确保二进制储存在指定的路径中,或者调试他以检查该二进制或相关的DLL文件

    出现问题原因: 编译socket.dll时,用到了openssl库. 使用libeay32.lib.ssleay32.lib生成socket.dll,就会报这样的错误 解决办法: 使用libeay32 ...

  3. 22(8).模型融合---RegionBoost

    在adaboost当中,样本的权重alpha是固定的,蓝色五角星所在的圈中3个○分错了,红色五角星所在的圈中4个×和1个○都分对了,很容易让人想到,这个模型,对于红色位置的判断更加可信. 动态权重,每 ...

  4. 数理统计（二）——Python中的概率分布API

    数理统计(二)——Python中的概率分布API iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 数理统计中进行假设检验需要查一些分布的上分位数表.在scip ...

  5. 浅谈python面向对象编程和面向过程编程的区别

    面向过程:分析出解决问题所需要的步骤,然后用函数把这些步骤一步步实现,使用的时候再一个个的依次调用即可. 优点:性能高 缺点:相较于面向对象而言,不易维护,不易复用,不易扩展 适合于小型的项目面向对象 ...

  6. Python Poetry 学习和使用

    Poetry是啥? 是一个Python虚拟环境和依赖管理工具,另外它还提供了包管理功能,比如打包和发布.可以用来管理python库和python程序. 安装Poetry curl -sSL https ...

  7. Java描述设计模式(08)：桥接模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.桥接模式简介 1.基础描述 桥梁模式是对象的结构模式.又称为柄体(Handle and Body)模式或接口(Interface)模式.桥 ...

  8. .NET多线程知识快速学习

    多线程是一个不会过时的话题,因为每个开发的成长必然要掌握这个知识点,否则半懂不懂怎么保证系统的可靠性和性能,其实在网上随便一搜都会有海量的文章说这个话题,大多数写得很细写得非常好,但发现很少有概览性的 ...

  9. SpringCloud的入门学习之概念理解、Config配置中心

    1.SpringCloud Config分布式配置中心.分布式系统面临的配置问题. 答:微服务意味着要将单体应用中的业务拆分成一个个子服务,每个服务的粒度相对较小,因此系统中会出现大量的服务.由于每个 ...

  10. PHP安全之道学习笔记4：系统命令注入

    系统命令注入 我们有时候写代码会用php脚本去调用系统函数完成业务功能,但是一些系统函数属于高危操作,一旦被webshell或者抓住漏洞则后患极大. 下面整理如下风险系统函数. exec() 函数 该 ...