这两天在学习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. vue-cli3配置webpack-bundle-analyzer插件

    为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化 网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考 ...

  2. JavaScript高阶函数(Heigher-order function)

    概念 <javascript设计模式和开发实践>中定义 函数既可作为参数被传递,也可以作为返回值输出 满足以下条件: 接受一个或多个函数作为输入 输出一个函数 高阶函数一般是那些函数型包含 ...

  3. SAP FI 问题汇总

    记录工作中遇到的问题汇总 1.固定资产折旧码的设置 2.与资产有关的日期 3.如何添加固定资产分类

  4. 一文解读JSON (转)

    JSON作为目前Web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式.尤其是在Ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选! 今天我们一起来学习一 ...

  5. docker容器虚拟化技术

    简单来说,在Windows系统下安装各种运行环境的坑简直不要太多了(●￣(ｴ)￣●),并不仅限于docker.Nginx.PHP.Python等等,我会尽详细写出实际过程中遇到的各种各样的奇葩问题 1 ...

  6. 2019/12/16学习内容摘要（Vim）

    一,Vim与vi的区别 vim可以当作vi的升级版本,他可以用多种颜色的方式来显示一些特殊的信息. vim会依据文件扩展名或者是文件内的开头信息, 判断该文件的内容而自动的执行该程序的语法判断式,再以 ...

  7. github二级域名配置

    首先打开GitHub并登上你的GitHub账号 新建仓库 点击settings 接下来就是操作git往这个仓库存文件,该域名会访问index.html文件

  8. java全栈项目

    文档地址:https://course.7yue.pro/lin/sleeve/ http://talelin.unna.com.cn/ 1.小程序里,我把结构分为三部分:wxml(view).pag ...

  9. C++ std::array 基本用法

    #include <iostream> #include <string> #include <array> using namespace std; // htt ...

  10. Flink| 运行架构

    1. Flink运行时组件 作业管理器(JobManager) 任务管理器(TaskManager) 资源管理器(ResourceManager) 分发器(Dispatcher) 2. 任务提交流程 ...