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绘图,下边是 ...
随机推荐
- WPF自定义控件（一）の控件分类
一.什么是控件(Controls) 控件是指对数据和方法的封装.控件可以有自己的属性和方法,其中属性是控件数据的简单访问者,方法则是控件的一些简单而可见的功能.控件创建过程包括设计.开发.调试(就是所 ...
- redis学习笔记（一）-安装
检查是否有redis yum 源 yum install redis 下载fedora的epel仓库 yum install epel-release 安装redis数据库 yum install r ...
- 8.03-json_to_csv
import json import csv # 需求 json 中的数据 转换 成 csv文件 # 1.分别 读 , 创建文件 json_fp = open('02new.json', 'r') c ...
- NOsql总结
NOsql总结 1.存储: 任意格式的数据:值对存储,列存储,文档存储,图形数据库 灵活的表结构支持:类型动态.scheme动态: 灵活的存储形式:列存储: 弱关系:NoSQL数据库种类繁多,但是一个 ...
- centos7下kubernetes（6。kubernetes创建资源的两种方式）
两种方式:1.命令:2.配置文件 之前我们在部署K8S的时候分别用到了命令和配置文件创建K8s资源: 1.命令方式:kubectl run nginx-deployment --image=nginx ...
- centos7下部署mysql主从复制
首先大致看一下这个图 环境说明: 系统:centos7 IP:master:192.168.7.235 slave:192.168.7.226 mysql版本MySQL-5.7 1.Master 下载 ...
- Anaconda的下载与安装
1.下载地点: 支持国产:https://mirrors.tuna.tsinghua.edu.cn/ Anaconda官网:https://www.anaconda.com/download/ 2.下 ...
- ELMO模型（Deep contextualized word representation）
1 概述 word embedding 是现在自然语言处理中最常用的 word representation 的方法,常用的word embedding 是word2vec的方法,然而word2vec ...
- json_encode里面经常用到的 JSON_UNESCAPED_UNICODE和JSON_UNESCAPED_SLASHES
php格式化json的函数json_encode($value,$options) 其中有2个比较常用到的参数 JSON_UNESCAPED_UNICODE(中文不转为unicode ,对应的数字 2 ...
- oracle 11G direct path read 很美也很伤人
direct path read在11g中,全表扫描可能使用direct path read方式,绕过buffer cache,这样的全表扫描就是物理读了. 在10g中,都是通过gc buffer来读 ...