1.canvas 标签

<canvas>

        <span>不支持canvas标签</span>

</canvas>

2.绘制环境: getContext('2d') //目前支持2d的场景

3.绘画方块:(1) fillRect(L,T,W,H) //默认颜色是黑色

　　　　　(2) strokeRect(L,T,W,H) //带边框的方块(默认一像素黑色边框,但是由于边框开始位置为一个像素点的1/2+相邻像素点的1/2,所以会显示2像素,解决办法:top值和left值增加0.5个像素)

　　　　　注:(1)和(2)顺序不同那么绘制的方块也不同

　　　　　(3) 当使用 fillRect(L,T,W,H) 设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script>

		window.onload=function(){

		　　　　var canvas=document.getElementById('canvas').getContext('2d');

		　　　　canvas.fillRect(50,50,50,50);

		}

	</script>

	<style>

		body{

		　　　　background: #000;

		}

		#canvas{

		　　　　width: 300px;

		　　　　height: 400px;

		　　　　background:#fff;

		}

	</style>

</head>

<body>

	<canvas id="canvas">

		<span>不支持canvas标签</span>

	</canvas>

</body>

</html>

显示情况如下:

该效果与我们预想的不同,这是因为标签中的宽高是画布中的真正宽度和高度,样式中的宽高等比例缩放,此时有两种修改方案:

①在代码js中添加设置宽高属性的代码设置宽度和高度:

canvas.setAttribute("height",canvas.clientHeight);

canvas.setAttribute("width",canvas.clientWidth);

②除去外部css中设置宽高属性的代码,给canvas标签直接添加宽度和高度属性:

<canvas id="canvas" width="300" height="400" style="background:#fff;">

	<span>不支持canvas标签</span>

</canvas>

或

<script>

    canvas.width = 300;

    canvas.height = 500;

</scritp>

最后显示效果如下:

4.设置绘图,边界绘制:

　window.onload=function(){

　　　　　　var canvas=document.getElementById('canvas').getContext('2d');

　　　　　　canvas.fillStyle='red';　　//填充颜色(绘制canvas是有顺序的)

　　　　　　canvas.lineWidth=10;　　//线高度(数值)

　　　　　　canvas.strokeStyle='blue';//边线颜色

　　　　　　canvas.lineJoin='round';   //边界连接点样式,属性值:miter(默认),round(圆角),bevel(斜角)

　　　　　　//  lineCap //端点样式,一条线的两个端点,属性值:butt(默认),round(圆角),square(高度多出为宽一半的值)

　　　　　　canvas.fillRect(50,50,100,100);

　　　　　　canvas.strokeRect(50.5,50.5,100,100);

　　}

6.绘图路径:

window.onload=function(){

    　　　　var canvas=document.getElementById('canvas').getContext('2d');
　　　　　　 canvas.fillStyle='red';

           canvas.beginPath();　　　　//开始绘制路径

           canvas.moveTo(100,200);　　//移动到绘制路径的新目标点

           canvas.lineTo(100,300);　　//新的目标点

           canvas.lineTo(200,300);　　//新的目标点

           canvas.closePath();　　　　//结束绘制路径,闭合(起点和终点连接)
　　　　　　 canvas.stroke();　　　　　　//画线
　　　　　　　
　　　　　　 canvas.beginPath();
　　　　　　 canvas.rect(10,10,100,100);//矩形区域
　　　　　　 canvas.closePath();
　　　　　　 ccanvas.fill();
　　　　　　 canvas.clearRect(10,10,100,100);//清除画布中的矩形区域

　　　　　　 canvas.save();//保存路径
　　　　　　//相当于函数,写在这中间的代码相当于局部变量,不会影响外部属性值
　　　　　　 canvas.restore();//恢复路径
}

7.[ 案例 ]  鼠标画线

window.onload=function(){

    　　　  var canvas=document.getElementById('canvas')

           var ctx=canvas.getContext('2d');

           canvas.onmousedown=function(ev){

           　　　　var ev= ev || window.event;

                  ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);

                  document.onmousemove=function(ev){

                    　　var ev= ev || window.event;

                    　　ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);

                    　　ctx.stroke();

                　}

                  document.onmouseup=function(){

                    　　document.onmousemove=null;

                    　　document.onmouseup=null;

                　 }

            }

}

关于canvas画布使用fillRect()时高度出现双倍效果解决办法的更多相关文章

  1. ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

    ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...

  2. 爬虫爬数据时，post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

  3. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  4. oracle执行update语句时卡住问题分析及解决办法

    转载:http://www.jb51.net/article/125754.htm 这篇文章主要介绍了oracle执行update语句时卡住问题分析及解决办法,涉及记录锁等相关知识,具有一定参考价值, ...

  5. 返回xml过长时被nginx截断的解决办法

    返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...

  6. IDEA使用maven构建时控制台中文乱码的解决办法

    使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...

  7. mongodb 更新数据时int32变为double的解决办法 & 教程

    https://www.runoob.com/mongodb/mongodb-mongodump-mongorestore.html mongodb 更新数据时int32变为double的解决办法   ...

  8. java下载文件时文件名出现乱码的解决办法

    转: java下载文件时文件名出现乱码的解决办法 2018年01月12日 15:43:32 橙子橙 阅读数:6249   java下载文件时文件名出现乱码的解决办法: String userAgent ...

  9. 当display=none时，元素和子元素高度为0的解决办法

    在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...

随机推荐

  1. Ubuntu下解决解压zip文件中文文件名乱码问题

    在Ubuntu下解压Windows下压缩的zip文件时,会出现解压出的带中文文件名的文件名乱码,这是因为Ubuntu和Windows默认的编码不同,Ubuntu下默认的编码是UTF-8,而Window ...

  2. read命令读取用户输入

    read命令用于从终端或文件中读取用户输入,它读取整行输入,如果没有指定名称,读取的行被赋值给内部变量REPLY.read命令常用选项:-a,-p,-s,-t,-n 1.REPLY变量 $readhe ...

  3. WPF中带水印的Textbox

    很多时候我们都希望通过水印来告诉用户这里该填什么样格式的数据,那么我们就希望有这样的一个控件. 为了方便起见,先定义一个依赖属性专门来存放水印中显示的字符串. public sealed class ...

  4. 通过LOGBACK实现每个类、包或自定义级别

    项实现LOGBACK对每个包或者类或者通过自定义级别的方式实现自定义输出的日志进入制定的文件.查阅了很多资料,都没有找到行之有效的解决方案,直到看到了这篇文章http://www.360doc.com ...

  5. Ubuntu16.04更换漂亮绚丽flatabulous主题

    作者:tongqingliu 转载请注明出处: Ubuntu16.04更换漂亮绚丽flatabulous主题 更新 sudo apt-get update sudo apt-get upgrade 安 ...

  6. 题解 最优的挤奶方案(Optimal Milking)

    最优的挤奶方案(Optimal Milking) 时间限制: 1 Sec  内存限制: 128 MB 题目描述 农场主 John 将他的 K(1≤K≤30)个挤奶器运到牧场,在那里有 C(1≤C≤20 ...

  7. 选课 树形DP+多叉树转二叉树+dfs求解答案

    问题 A: 选课 时间限制: 1 Sec  内存限制: 128 MB 题目描述 大 学里实行学分.每门课程都有一定的学分,学生只要选修了这门课并考核通过就能获得相应的学分.学生最后的学分是他选修的各门 ...

  8. loadrunner 手工参数拼接与l oadrunner的url编码

    Acction() { //演示需要的一些变量,提前声明 char *name = "yezi_zh"; "; char *work = "engin" ...

  9. dos命令窗口修改编码,CMD编码修改方法

    dos命令窗口修改编码,CMD编码修改方法 第一步,打开命令窗口有两种方法第一种:可以点击左下角的开始按钮,在运行里面输入CMD,然后敲回车2第二种:组合键WIN+R键,组合键后就会弹出窗口,然后输入 ...

  10. 2017全球互联网技术大会回顾（附PPT）

    有幸遇见 GITC2017上海站,刚好遇见你! 为期两天(6.23~24)的GITC大会在上海举行,我有幸参加了24号的那场,也就是上周六,之所以今天才来回顾,是我想等PPT出来后分享给大家! 这应该 ...