自己使用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. 【HNOI2016】最小公倍数

    [HNOI2016]最小公倍数 容易想到先将所有边按\(a\)排序,然后处理\(b\).(然后我就不会了 我们按\(a\)的权值分块,处理\(a\)权值位于第\(k\)个块的询问的时候,我们先将询问按 ...

  2. C#事件の.net下的EventArgs和EventHandler

    事件参数(EventArgs) .Net框架里边提供的一个委托EventHandler来Handle事件. 一样,搞一个场景(这个场景是书里的):买车.经销商(CarDealer)会上新车(NewCa ...

  3. 深入理解Zuul之源码解析

    转载:http://blog.csdn.net/forezp/article/details/76211680 Zuul 架构图 在zuul中, 整个请求的过程是这样的,首先将请求给zuulservl ...

  4. 自己动手写处理器之第二阶段（1）——可编程逻辑器件与PLD电路设计流程

    将陆续上传本人写的新书<自己动手写处理器>(尚未出版),今天是第五篇,我尽量每周四篇         通过上一章的介绍,读者应该知道CPU内部有一些主要的电路,比方:译码电路.运算电路.控 ...

  5. 在git多分支repo仓库中彻底清除大文件

    坑的由来 repo中不小心上传了许多测试生成的data.结果可想而知,原本只有代码的仓库突然间变得无比臃肿(或者是慢慢臃肿),从早期的几十MB,迅速飙升至1G. 到底发生了什么 早些时候我对git的原 ...

  6. [Python] timeit测试代码运行效率

    python中有两种方法判断一个数是不是偶数或者奇数: In [29]: 3&1 Out[29]: 1 In [30]: 3%2 Out[30]: 1 In [31]: 4&1 Out ...

  7. 转://创建oracle索引时需要注意的7个事项

    在创建Oracle索引时,有一些问题使我们需要注意的,下面就为您介绍创建oracle索引的一些注意事项,希望对您学习创建Oracle索引方面能有所帮助. 1.一般来说,不需要为比较小的表创建索引: 2 ...

  8. 【转】Chrome 控制台新玩法-console显示图片以及为文字加样式

    在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台 ...

  9. pip 提速方法

    Python 包管理软件 pip 在默认情况下,下载安装 Python 包太慢,容易失败.以下给出解决方案. pip install 的选项说明如下: Package Index Options: - ...

  10. mysql远程连接 Host * is not allowed to connect to this MySQL server

    mysql -u root -p mysql>use mysql; mysql>update user set host =’%'where user =’root’; mysql> ...