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. [0] C#异常种类

    c#中异常捕获catch{}常用的异常类型 Exception 类  描述 SystemException 其他用户可处理的异常的基本类 ArgumentException 方法的参数是非法的 Arg ...

  2. maven 的docker插件

    首先你得配置一个带有认证的docker私有仓库. 本机要安装maven和jdk vi pom.xml <plugin> <groupId>com.spotify</gro ...

  3. maven打包 tomcat运行pom配置 或 打成jar包

    maven打包 tomcat运行pom配置,同时还需要配置org.apache.tomcat.maven插件,这里省略. <groupId>com.company</groupId& ...

  4. jquery一次绑定多个元素事件

    jquery一次绑定多个元素事件 $(".peoplenum,input[name$='otherAmount'],#aa,#bb").bind("change" ...

  5. Tp框架获取客户端IP地址

    /** * 获取客户端IP地址 * @param integer $type 返回类型 0 返回IP地址 1 返回IPV4地址数字 * @return mixed */ function get_cl ...

  6. php二进制流文件

    <?php $img_file = 'test.png'; // $fp = fopen($img_file, 'rb'); // $content = fread($fp, filesize( ...

  7. FFT/NTT 多项式学习笔记

    FFT(快速傅立叶变换)和NTT(快速数论变换)看上去很高端,真正搞懂了就很simple了辣. 首先给出多项式的一些定义(初中数学内容): 形如Σaixi的式子就是多项式! 多项式中每个单项式叫做多项 ...

  8. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  9. JavaWeb 后端 <七> 之 mvc3层架构

  10. Java--回调接口

    回调接口: 我们都知道,一个线程在运行中,遇到一个耗时操作(方法)时,会开启另外一个线程,即所谓 -- 异步 .java中 回调接口 也必然应用与异步加载. 所谓 回调接口 ,也就是线程运行中 遇到一 ...