自己使用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. Django-rest-framework 接口实现 分页:(Pagination) 解析器(Parser) 渲染器(renderer)

    分页:(Pagination) rest_framework 中已经定义好了 3 种 分页模式 from rest_framework.pagination import PageNumberPagi ...

  2. Spring Cloud构建微服务架构：服务网关（路由配置）【Dalston版】

    转载:http://blog.didispace.com/spring-cloud-starter-dalston-6-2/ 原创  2017-08-26  翟永超  Spring Cloud 被围观 ...

  3. Linux分区的几种方案

    通用方法/boot 引导分区 200M swap 交换分区 内存的1.5倍(内存小于8G) 大于8G 给8G/ 根分区 剩下多少给多少 数据非常重要/bootswap/ 50-200G/data 剩下 ...

  4. Spring Boot+Spring Security+JWT 实现 RESTful Api 权限控制

    摘要:用spring-boot开发RESTful API非常的方便,在生产环境中,对发布的API增加授权保护是非常必要的.现在我们来看如何利用JWT技术为API增加授权保护,保证只有获得授权的用户才能 ...

  5. 【转】如何使用分区助手完美迁移系统到SSD固态硬盘？

    自从SSD固态硬盘出世以来,一直都被持续关注着,SSD的性能优势让无数用户起了将操作系统迁移到SSD的心思,直接后果就是让无数机械硬盘为止黯然退场,很多软件都可以做到系统迁移,然而,被完美迁移的系统却 ...

  6. 开源的许可证GPL、LGPL、BSD、Apache 2.0

    软件开发者要开源软件,不单单是开放源代码就可以了,选择一种许可证很重要,一个许可证之于软件就相当于价值观之于普通人,代表了这个软件的基本品性.一个错误的许可证选择可能会直接导致整个项目的失败.各种开源 ...

  7. 使用java实现快速排序（挖坑填数法和指针交换法）

    快速排序:通过一趟排序,将数据分为两部分,其中一部分中的所有数据比另外一部分的所有数据要小,然后按照此方法,分别对这两部分进行排序,达到最终的排序结果. 每趟排序选取基准元素,比该基准元素大的数据放在 ...

  8. BZOJ1390 CEOI2008 Fences 凸包、Floyd最小环/DP

    传送门 为了方便描述把固定点叫做白色点,Tree叫做黑色点 一种基于特殊性质的做法: 如果不算入选白色的权值,那么一定会选中所有白色点构成的凸包上的点,因为能够尽可能围更多的黑色点.然后我们在这个基础 ...

  9. 【C#复习总结】细说匿名方法

    1 前言 本系列会将[委托] [匿名方法][Lambda表达式] [泛型委托] [表达式树] [事件]等基础知识总结一下.(本人小白一枚,有错误的地方希望大佬指正) 系类1:细说委托 系类2:细说匿名 ...

  10. 使用protostuff自定义编解码器优化springcloud-feign性能

    前言 Spring Cloud feign是伪RPC方式解决微服务间的调用.翻看FeignCloudFeign源码,可以看到Feign默认使用HttpUrlConnection; 代码在Default ...