Html5使用canvas作图线宽很粗
自己使用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作图线宽很粗的更多相关文章
- Html5使用canvas作图
以下例子是项目中实际用到的.不足之处请大家指正,设计到画线,写文字,填充,文字旋转. <!DOCTYPE html> <html> <head lang="en ...
- Processon 一款基于HTML5的在线作图工具
CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
- HTML5之Canvas影片广场
HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- HTML5之Canvas绘图(一) ——基础篇
HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...
随机推荐
- python 浅谈字典dict
一.字典简介 字典(dict)是python中唯一的映射类型,他是以{ }括起来的键值对组成,在dict中的key是唯一的.在保存的时候,根据key来计算出一个内存地址.然后将key-value保存在 ...
- MySQL高级知识（十四）——行锁
前言:前面学习了表锁的相关知识,本篇主要介绍行锁的相关知识.行锁偏向InnoDB存储引擎,开销大,加锁慢,会出现死锁,锁定粒度小,发生锁冲突的概率低,但并发度高. 0.准备 #1.创建相关测试表tb_ ...
- C# Lambda 表达式学习之（四）：动态构建类似于 c => c.Age == 2 || c.Age == 5 || c => c.Age == 17 等等一个或多个 OrElse 的表达式
可能你还感兴趣: 1. C# Lambda 表达式学习之(一):得到一个类的字段(Field)或属性(Property)名,强类型得到 2. C# Lambda 表达式学习之(二):LambdaExp ...
- 微信小程序如何引入外部字体库iconfont的图标
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...
- java 定时任务多线程处理
@Configuration@EnableSchedulingpublic class ScheduleConfig implements SchedulingConfigurer, AsyncCon ...
- 02 python初学 （数字运算 逻辑运算）
运算: 5/2 -> 2.5 5//2 -> 2 取整 5%2 -> 1 取余 2**10 -> 1024 指数运算 逻辑运算符: and : 条件1 and 条件2 no ...
- 移走mysql data目录，及常见mysql启动问题
一般mysql安装在/usr/local/下,现以将/usr/local/mysql/data目录移动到/home/mysql下为例 首先保证/home/mysql目录是存在的,本例中使用了mysql ...
- Mybatis学习总结（七）——调用存储过程
一.返回select结果集 1.创建存储过程 DELIMITER // DROP PROCEDURE IF EXISTS proc_queryUser; CREATE PROCEDURE proc_q ...
- ASP.NET Core - 关于Tag Helper值得了解的五点
如果您开发过ASP.NET Core Web应用程序,您应该已经熟悉了Tag Helper.ASP.NET Core应用程序依赖Tag Helper来呈现表单和表单字段是很常见的.所以,一个视图通常包 ...
- C# 中使用log4.net的注意事项
新建Log4Net.config文件,内容为 <?xml version="1.0" encoding="utf-8" ?> <configu ...