自己使用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. 《生命》第三集：Mammals （哺乳动物）

    南极零下四十度的情况下,威德尔海豹能深潜到冰下捕食,并且教自己的小宝宝如何下水,看了这个才知道,海豹居然是哺乳动物,小海豹看着挺萌的. 长鼻鼩是一种很活跃的生物,而且会自己设计路线,建立迷宫,帮助自己 ...

  2. MySQL高级知识（七）——索引面试题分析

    前言:该篇随笔通过一些案例,对索引相关的面试题进行分析. 0.准备 #1.创建test表(测试表). drop table if exists test; create table test( id ...

  3. 设计模式のInterpreter Patern（解释器模式）----行为模式

    一.问题产生背景 有一句话“小明和小龙是好朋友”,我想分析其中谁是人,我想分析他们的关系等多种需求,那么我们应该如何处理,如果为每一个关系都进行判断?显然不合适,我们可以将二者的关系进行抽象处理,然后 ...

  4. WPF自定义控件（二）の重写原生控件样式模板

    话外篇: 要写一个圆形控件,用Clip,重写模板,去除样式引用圆形图片可以有这三种方式. 开发过程中,我们有时候用WPF原生的控件就能实现自己的需求,但是样式.风格并不能满足我们的需求,那么我们该怎么 ...

  5. 真正的Maven经常使用命令

    长期用Eclipse的Maven插件的小伙伴可能接触Maven的经常使用命令比較少.每次用每次翻文档. 假设让你脱离Eclipse怎么办,面试的时候考到了怎么办-- 假设你不想尴尬,请小朋友花点时间运 ...

  6. [转]Oracle 清除incident和trace -- ADRCI用法

    在oracle11g中,dump file的目录已经有所改变,bdump和udump整合到trace中,cdump独立出一个. E:\ora11g\app\Administrator\diag\rdb ...

  7. 【转】iOS中修改AVPlayer的请求头信息

    在开发中, 我们经常需要在网络请求时修改HTTP/HTTPS的请求头信息 1.普通AFN请求 #import "LMHTTPSessionManager.h" #import &l ...

  8. 漏洞扫描，linux配置规范处理

    #!/bin/bash ## set shortest length of password filename=/etc/login.defs if [ -f "$filename" ...

  9. 初学Python——字符串相关操作

    基本字符串操作 Pyhton中字符串的格式化输出在前面已经总结了,接下来介绍一些常用的字符串操作 先定义一个字符变量,以下的操作都以此为例: name=" my name is china ...

  10. matlab中fix函数，floor函数，ceil函数

    1)fix(n)的意义是取小于n的整数(是向零点舍入的意思是往零的方向上靠),这是一类应用在整数取值上的函数,就如同以前我们所研究的求整问题,例如,fix(pi)=3;fix(3.5)=3;fix(- ...