自己使用canvas画图是碰到的问题，在这里记录一下。我把lineWidth设置为1，但是很粗，而且发虚。代码如下：

 <script type="text/javascript">

     $(function () {

         draw();

     })

     function draw(){

         var fdCanvas = document.getElementById("frequencyDomainChart");

         var ctx = fdCanvas.getContext("2d");

         ctx.lineWidth = 1;

         ctx.beginPath();

         ctx.moveTo(0,0);

         ctx.lineTo(500,500);

         ctx.stroke();

     }

 </script>

 <style type="text/css">

     #frequencyDomainChart{

         height: 600px;

         width: 800px;

         border: 1px solid #000000;

     }

 </style>

 <body>

     <canvas id="frequencyDomainChart"></canvas>

 </body>

 </html>

显示出来之后发虚，然后网上各种找结果，最后发现是由于canvas没有设置height与width，css中设置的height与weight对canvas不管用。

 <style type="text/css">

     #frequencyDomainChart{

         border: 1px solid #000000;

     }

 </style>

 <body>

     <canvas id="frequencyDomainChart" height="600px" width="800px"></canvas>

 </body>

 </html>

线条终于不发虚了！！！！！！！！！

Html5使用canvas作图线宽很粗的更多相关文章

  1. Html5使用canvas作图

    以下例子是项目中实际用到的.不足之处请大家指正,设计到画线,写文字,填充,文字旋转. <!DOCTYPE html> <html> <head lang="en ...

  2. Processon 一款基于HTML5的在线作图工具

    CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...

  3. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  4. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  6. html5 利用canvas实现简单的人物走动

    最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...

  7. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  8. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  9. HTML5之Canvas绘图(一) ——基础篇

    HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...

随机推荐

  1. nginx stream 日志设置(Version 1.9.0 +)

    nginx自1.9.0开始提供tcp/udp的反向代理功能,直到1.11.4才开始提供session日志功能. 启用stream日志配置文件 主配置文件/etc/nginx/nginx.conf增加内 ...

  2. mac下安装redis详细步骤

    Linux下安装redis也可以参照下面的步骤哦!!!! 1.到官网上下载redis,我下载的版本是redis-3.2.5.tar 官网地址:http://redis.io/ 2.将下载下来的tar. ...

  3. centos7下kubernetes（10。kubernetes-daemonset）

    deployment部署得副本pod会分布在各个node上,每个node上可以运行很多个pod. daemonset的不同之处就在于,daemonset可以让每个node上只运行一个pod daemo ...

  4. display为inline-block的元素有内容和没有内容情况下高度不一致的问题

    这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,虽然不会出现元素中没内容的情况,但是我还是决定必须解决这个问题,可能我有一些轻微的强迫症. &l ...

  5. UVA116-Unidirectional TSP（动态规划基础）

    Problem UVA116-Unidirectional TSP Accept: 7167  Submit: 56893Time Limit: 3000 mSec Problem Descripti ...

  6. mysql-备份数据库脚本

    备份数据库脚本,包括单库,全库备份脚本 #!/bin/bashc_user=rootc_password=12345678c_date=`date +"%Y%m%d"`c_dir= ...

  7. LINUX 查看当前系统的内存使用情况 free

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code # free 显示结果如下: Mem:表示物理内存统计 total 内存总数 8057 ...

  8. Feature Extractor[ResNet v2]

    0. 背景 何凯明大神等人在提出了ResNet网络结构之后,对其做了进一步的分析工作,详细的分析了ResNet 构建块能起作用的本质所在.并通过一系列的实验来验证恒等映射的重要性,并由此提出了新的构建 ...

  9. Nginx（二）------nginx.conf 配置文件

    上一篇博客我们将 nginx 安装在 /usr/local/nginx 目录下,其默认的配置文件都放在这个目录的 conf 目录下,而主配置文件 nginx.conf 也在其中,后续对 nginx 的 ...

  10. JavaEE学习之JPA中配置文件persistence.xml

    下面是我从网上找到的关于JPA配置文件persistence.xml的相关描述: <?xml version="1.0" encoding="UTF-8" ...