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. 高性能队列Disruptor系列2--浅析Disruptor

    1. Disruptor简单介绍 Disruptor是一个由LMAX开源的Java并发框架.LMAX是一种新型零售金融交易平台,这个系统是建立在 JVM 平台上,核心是一个业务逻辑处理器,它能够在一个 ...

  2. 用queue函数写广搜

    以走迷宫需要的最少步数的代码为例 #include<stdio.h>#include<string.h>#include<queue> using namespac ...

  3. 单机部署 kubernets 方法汇总

    #minikube : 可以方便的在本机用虚拟机创建一个开箱即用的Kubernetes集群 #kubeadm : 可以自动化的将多台Ubuntu或者CentOS主机组建成集群 #nanokube,ki ...

  4. vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  5. MongoDB-配置翻译

    Configuration File(配置文件) File Format(文件格式) Use the Configuration File(使用配置文件) Core Options(核心设置) sys ...

  6. centos6.7下安装mysql5.6.22同时解决中文乱码问题

    1.下载 http://dev.mysql.com/downloads/mysql/ 或者使用wget下载: wget http://dev.mysql.com/get/Downloads/MySQL ...

  7. ReactiveCocoa源码解析(四) Signal中的静态属性静态方法以及面向协议扩展

    上篇博客我们聊了Signal的几种状态.Signal与Observer的关联方式以及Signal是如何向关联的Observer发送事件的.本篇博客继续上篇博客的内容,来聊一下Signal类中静态的ne ...

  8. 【caffe】Error parsing text-format NetParameter: ****:**:Expected string.

    错误描述: prototxt中第****行,第**列缺少一个整型数或者标识符. 解决方法: 检查对应的prototxt文件,第****行,第**列是否遗漏相关信息. 我的文件是在代码新旧版本没对应好~ ...

  9. kbengine 常见问题汇总

    Q: KBEngine是什么,能用来做什么?A: KBEngine是一个通用网络游戏服务器引擎,适合绝大多数中心拓扑结构的网络游戏,包括但不限于即时和回合制MMORPG.副本类.房间类.卡牌.棋牌等. ...

  10. 怎样把echarts图表做成响应式的

    如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...